Is it possible to make your own custom input types in an HTML form?

css, forms, html, javascript

Solution

Yes, you can do this, but you don't really make a new type of input, you're simply creating a type that the browser/rendering engine doesn't know about and will ignore. But the CSS should apply to it as you have it.

However, I would suggest that you simply add a class to the input instead, if this is simply for styling purposes.

<input class="my-input" ...>

input.my-input {
  ...
}

Problem

I was wondering if I could make something like this: `<input type="secure">`. I want to know if it is possible to make a custom input type for my website. I was going to use it to do things that you cannot normally do and style it with CSS and make it do what I want with JavaScript. Here is any example: CSS ``` @import url("https://fonts.googleapis.com/css?family=Roboto"); input[type="secure"] { background-color: #b5d1ff; border: 0.5px solid #f4a460; height: 1.6rem; color: black; padding-left: 0.4rem; padding-right: 0.4rem; width: 8.62rem; font-family: 'Roboto', serif; } ``` I haven't currently decided what I want to do with JavaScript but I think you get the idea.

Original source