Відповіді:
input[type=text]або, обмежившись текстовими введеннями всередині форм
form input[type=text]або, обмежившись далі певною формою, вважаючи, що вона має ідентифікатор myForm
#myForm input[type=text]Примітка. Це не підтримується IE6, тому, якщо ви хочете розвиватися для IE6, використовуйте IE7.js (як запропонував Yi Jiang) або почніть додавати класи до всіх своїх введень тексту.
Довідка: http://www.w3.org/TR/CSS2/selector.html#attribute-selectors
Оскільки вказано, що значення атрибутів за замовчуванням не завжди можна вибирати за допомогою селекторів атрибутів, можна спробувати охопити інші випадки розмітки, для яких виводиться текст:
input:not([type]), // type attribute not present in markup
input[type=""], // type attribute present, but empty
input[type=text] // type is explicitly defined as 'text'Однак це залишає випадок, коли тип визначений, але має недійсне значення і все ще повертається до типу = "текст". Щоб підтвердити, що ми могли б використовувати всі входи, які не є одним з інших відомих типів
input:not([type=button]):not([type=password]):not([type=submit])...Але цей селектор був би досить смішним, а також список можливих типів зростає, коли до HTML додаються нові функції.
Зауважте: :notпсевдоклас підтримується лише починаючи з IE9.
Тут можна скористатися селектором атрибутів:
input[type="text"] {
font-family: Arial, sans-serif;
}Це підтримується в IE7 та вище. Ви можете використовувати IE7.js, щоб додати підтримку для цього, якщо вам потрібно підтримати IE6.
Дивіться: http://reference.sitepoint.com/css/attributeselector для отримання додаткової інформації
sans-serif, ні san-serif.
Зазвичай я використовую селектори в своєму головному таблицю стилів, потім створюю файл ie6 .js (jquery), який додає клас до всіх типів введення. Приклад:
$(document).ready(function(){
$("input[type='text']").addClass('text');
)};А потім просто скопіюйте мої стилі в таблиці стилів ie6 за допомогою класів. Таким чином фактична розмітка трохи чистіша.
Ви можете використовувати :textSelector для вибору всіх входів з текстовим типом
$(document).ready(function () {
$(":text").css({ //or $("input:text")
'background': 'green',
'color':'#fff'
});
});:textє розширенням jQuery і не є частиною специфікації CSS, запити з використанням: текст не може скористатися підвищенням продуктивності, що надається нативним методом DOM querySelectorAll (). Для кращої роботи в сучасних браузерах використовуйте [type="text"]замість цього. Це буде працювати для IE6+.
$("[type=text]").css({ // or $("input[type=text]")
'background': 'green',
'color':'#fff'
});CSS
[type=text] // or input[type=text]
{
background: green;
}Я мав текстове поле типу введення в полі рядка таблиці. Я націлюю його з кодом
.admin_table input[type=text]:focus
{
background-color: #FEE5AC;
}Як @Amir опублікував вище, найкращий спосіб сьогодні - крос-браузер і залишити позаду IE6 - це використовувати
[type=text] {}Ніхто не згадав нижчу CSS специфічністю ( чому це що важливо ?) До сих пір, [type=text] особливості 0,0,1,0 замість 0,0,1,1 з input[type=text].
На ефективність роботи вже немає негативного впливу.
нормалізувати щойно випущений v4.0.0 з пониженою селекторною специфічністю .
За допомогою селектора атрибутів ми націлюємо текст типу введення в CSS
input[type=text] {
background:gold;
font-size:15px;
}введення [тип = текст]
Це вибере весь текст типу введення на веб-сторінці.
Селектори атрибутів часто використовуються для введення даних. Це список селекторів атрибутів:
[title] Вибрані всі елементи з атрибутом title.
[title = banana] Усі елементи, які мають значення "banana" атрибута title.
[title ~ = банан] Усі елементи, які містять "банан" у значенні атрибута заголовка.
[title | = banana] Усі елементи, значення атрибуту заголовка починаються з 'banana'.
[title ^ = banana] Усі елементи, значення атрибуту заголовка починаються з 'banana'.
[title $ = banana] Усі елементи, значення атрибута заголовка яких закінчуються на "banana".
[title * = banana] Усі елементи, значення яких є атрибутом заголовка, містять підрядку 'banana'.
Довідка: https://kolosek.com/css-selectors/