Блог

Главная - Вопросы по программированию - Как задать стиль текстового поля (html)

Как задать стиль текстового поля (html)

#html #css

#HTML #css

Вопрос:

Я хочу изменить ширину только этого:

      <input type="text" name="experience"/>

Но у меня есть это:

 <input type="checkbox" name="option2" value="2222" />

тоже меняется.. когда я устанавливаю:

 input {width:134px;}

Комментарии:

1. У вас нет «текстового поля». Серьезно. Я понимаю, что, возможно, это только меня расстраивает, но у вас есть текстовый ввод. Возможно, у вас даже есть textarea . Но у вас действительно нет «текстового поля». Вздох…

Ответ №1:

Дайте ему class или id и используйте селектор класса или идентификатора:

 <input type="text" name="experience" id="experience" />
<input type="text" name="experience" class="experience" />

#experience { width:134px }
.experience { width:134px }

В качестве альтернативы вы можете использовать селектор атрибутов:

 input[name='experience'] { width:134px }

Однако обратите внимание, что селекторы атрибутов не работают в IE6, поэтому, если вы хотите поддерживать это, вам придется использовать селектор класса или идентификатора.

Комментарии:

1. черт, у меня много текстовых полей… Тогда мне нужно проделать большую работу

2. Только если важен IE6. Если нет, просто используйте селектор атрибутов.

Ответ №2:

Если вы хотите применить только к определенному текстовому полю, используйте style атрибут.

 <input type="text" name="experience" style="width:134px"/>

Если вы хотите применить его ко всем текстовым полям на странице, используйте CSS:

 .textbox { 
 width:134px; 
}

а затем применить его к тексту:

 <input type="text" name="experience" class="textbox"/>

Комментарии:

1. Если вы хотите быть совместимым с мобильными устройствами, вам не следует использовать встроенные стили, всегда используйте селекторы идентификаторов или селекторы классов. Вот что сказал мне интегратор здесь на работе.

2. Да, это правда, поэтому в моем ответе был указан альтернативный класс 🙂

Ответ №3:

Не изменяя HTML, вы можете установить css с помощью name атрибута:

 input[name="experience"]{
    width:134px;
}

Ответ №4:

вы должны указать в поле ввода класс / идентификатор, например:

/

Затем вы должны установить параметры стиля в своей таблице стилей .css: для настройки стиля класса используйте .name{…}, для идентификатора используйте #name{…}

Комментарии:

1. Вы неправильно выбрали id class селекторы and . id селекторы используют # , а class селекторы используют .

Ответ №5:

Вы можете задать стиль по типу.

 <input type="text" name="email">
<input type="text" name="phone">

input[type="text"]{ background:#ff0000; }

Ответ №6:

В вашем первоначальном вопросе упоминался один ввод текста, однако в вашем последующем комментарии упоминается, что у вас много текстовых вводов, чтобы избежать повторения в ваших файлах css, вы могли бы установить класс ввода на что-то вроде «short», а затем применить ширину к этому классу.

 input.short {width : 134px}

Если вы хотите применить ширину к входным данным в определенной форме (или элементе), вы можете использовать:

 form input {width : 134px}

В будущем это может быть более масштабируемым, если вам нужно изменить ширину всех текстовых вводов для формы / сайта

Комментарии:

1. Это позволило бы выбирать элементы с short классом, которые являются дочерними элементами an input , а не входные элементы с short классом.

2. Джеймс прав, ваше объявление должно было быть «intput.short», а не «ввод [пробел].short»

3. Спасибо Матье, на самом деле Джеймс не совсем корректен, поскольку элементы ввода не должны иметь дочерних элементов, насколько мне известно, однако это была ошибка с моей стороны, и я изменил ее сейчас — спасибо