Входная коробка ввода является незаменимым компонентом веб -страниц, но каждый браузер имеет разные стили отображения полевых полетов.
Например:
Приведенная выше рисунок - это ящик ввода, который поставляется с Google Chrome и IE Browser, и стиль не является удовлетворительным, поэтому большинство из них сами напишут стили.
Вот простой стиль текстового поля
input {border: 1px solid #ccc; Заполнение: 7px 0px; граница-радий: 3PX; / *CSS3 атрибут, т.е. не поддерживает */ Padding-left: 5px; } Изображение воспроизведения:
Стиль атрибут Значение:
Граница: 1PX SOLID #CCC; /*Установите границу коробки ввода, цвет, размер и сплошные пунктирные линии линии края*/
Заполнение: 7px 0px; /* Установите высоту поле ввода, вы также можете использовать высоту, но если вы используете высоту, курсор блока ввода будет размещен сверху, а другие стили должны быть установлены, чтобы исправить ее, и он может быть не совместимым.
граница-радий: 3PX; / *Камень собственности внутри CSS3, т.е. не поддерживает */
Лебь набивки: 5px; /*Пусть объявление будет в 5 пикселях слева, и в начале курсор прикреплен к краю поле ввода слева*/
По сути, вышеупомянутые стили чаще используются в настоящее время, а затем некоторые другие настройки ввода
Например: атрибут заполнителя
Это свойство имеет быстрый текстовый эффект в поле ввода. Свойство CSS3 не поддерживает IE
Ввод нажмите, чтобы светиться специальный эффект:
input {border: 1px solid #ccc; Заполнение: 7px 0px; граница-радий: 3PX; Лебь набивки: 5px; -Webkit-box-shadow: вставка 0 1px 1px rgba (0,0,0, 0,075); Box-Shadow: вставка 0 1PX 1PX RGBA (0,0,0, 0,075); -Вобкит-трансляция: пограничный цвет легкость. -Ко-транзиция: пограничный цвет легкость. Переход: пограничный цвет легкость. Схема: 0; -Webkit-box-shadow: вставка 0 1px 1px rgba (0,0,0, 0,075), 0 0 8px rgba (102,175,233, .6); Box-Shadow: вставка 0 1px 1px rgba (0,0,0, 0,075), 0 0 8px rgba (102,175,233, .6)} Изображение воспроизведения: