What's the best way to not display the default input styles?
Does anyone know a good way to hide the default styles for all inputs like text, textbox, range, radio buttons / checkboxes, etc.
I usually include the following code in my projects:
CSS
input[type="text"],
input[type="email"],
input[type="url"],
textarea,
select {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
What kind of work is great for inputs like text, teahouse and selection, but what about others?
I would normally use the following code for radio and checkboxes:
CSS
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
appearence: none;
But is this really the best way?
Finally, on Range, this is what I usually use:
CSS
input[type=range] {
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
width: 100%; /* Specific width is required for Firefox. */
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]:focus {
outline: none; /* Removes the blue border. Not great for accessibility. */
}
Availability:
In terms of design, not many people like the default plan that you get when you focus on the input, I prefer as much as others to outline the outline appropriately with the design of the project. What's the best way to do this?
source to share
You really have everything you need, at least for desktop browsers.
For iOS text fields, you need to add a few extras:
input[type="text"],input[type="email"],input[type="url"],textarea {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
outline: none; //important!
border: none;
}
As far as radio buttons are concerned, using CSS transforms for purposes other than 3d, viewport and animation can be seen as bad practice. It could have been avoided in medium form; however, having a large shape with dozens of inputs, you can see a huge lag when viewed at the lower end of the device. This is due to the use of CSS3 using graphics acceleration. Hardware acceleration is generally good if used correctly. For example, 3D animation animation. They have less acceleration lag because all DOM trees / layers are rendered into a vector and sent to the graphics card. Understand that computers have graphics cards, but with a lot of people using tablets and the like, graphics cards don't have all that glory. Anyway,, here you have to do for radios, which will also be more cross-browser (CSS2):
input[type=radio] {
display : inline-block;
margin-left : -28px;
padding-left : 28px;
background : url('radio.png') no-repeat 0 0;
line-height : 24px;
}
Using a positive trick with a positive negative margin, you can push the old radio off the edge and use a background image. Be sure to use <label>
with these! To keep them accessible to all browsers.
What I got is there really are many methods and my answer here is certainly not definitive.
Enjoy!
source to share