Каков наилучший способ не отображать стили ввода по умолчанию?

Question

Кто-нибудь знает хороший способ скрытия стилей по умолчанию для всех входов, таких как текст, текстовая область, диапазон, радиокнопки/флажки и т. Д.?

Я обычно включают следующий код в своих проектах:

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; 
} 

который работает великих людей для входов, таких как текст, teaxtarea и выберите, но как насчет остальных?

Я обычно использую следующий код для радио и флажков:

CSS

-webkit-transform: translateY(-50%); 
-moz-transform: translateY(-50%); 
-ms-transform: translateY(-50%); 
-o-transform: translateY(-50%); 
transform: translateY(-50%); 
appearence: none; 

Но действительно ли это лучший способ?

Наконец на хребет, это то, что я обычно использую:

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. */ 
} 

Доступность:

С точки зрения дизайна нет многих людей, как по умолчанию наброски, которые вы получаете, когда фокусируетесь на входе, я предпочитаю так же, как и другие, для того, чтобы стиль был составлен в соответствии с проектом проекта. Каков наилучший способ сделать это?

Answer 1

У вас действительно есть все, что вам нужно, по крайней мере, для настольных браузеров.

Для IOS текстовых полей, вы хотите добавить пару дополнительных услуг:

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; 
} 

Как для радиокнопок, используя CSS преобразования для других целей, чем 3d, видовой и анимацию можно утверждать, как плохая практика , Его можно было бы избежать в средней форме; однако, имея большую форму с десятками входов, можно заметить огромное отставание, если смотреть на нижнем конце устройства. Это связано с использованием CSS3 с использованием графического ускорения. Аппаратное ускорение, как правило, хорошо, если использовать правильно. Например, анимация 3D-анимации. У них меньше отставания при ускорении, потому что все деревья/слои DOM формируются в вектор и отправляются на графическую карту. Поймите, что у компьютеров есть графические карты, но с большим количеством людей, использующих планшеты и т. Д., У видеокарт нет всей этой славы. Во всяком случае, вот что вы должны сделать для радио вместо этого, который будет больше кросса-браузер, а также (CSS2):

input[type=radio] { 
    display  : inline-block; 
    margin-left : -28px; 
    padding-left : 28px; 
    background : url('radio.png') no-repeat 0 0; 
    line-height : 24px; 
} 

Использования отрицательной маржи положительной обивки трюка, вы можете нажать на старое радиоуправлении от края и использовать фоновое изображение. Обязательно используйте <label> с этими! Чтобы они оставались доступными для всех браузеров.

Это все, что у меня есть, на самом деле существует множество методов, и мой ответ здесь определенно не является окончательным.

Наслаждайтесь!