Переключатели с несколькими входами [тип] CSS
Согласно спецификации W3 CSS, что-то вроде: input[type~="text password"]
должно выбрать поля ввода, тип которых установлен как "текст" или "пароль", но он не работает! Я неправильно истолковал эту строку?
E [foo ~ = "warning" ] Соответствует любому элементу E, значение атрибута "foo" список значений, разделенных пробелами, один из которых в точности равен "Предупреждение".
источник спецификации CSS, это четвертый снизу в таблице.
Ответы
Ответ 1
Да, вы ошибаетесь. Селектор должен искать в пространственном разделенном списке.. т.е.
<element attribute="text password" />
вы можете найти с помощью:
element[attribute~="text"]
Преимущество этого в том, что оно не должно совпадать:
<element attribute="textual password" />
Надеюсь, что это поможет?
Чтобы достичь того, что вы на самом деле пытаетесь сделать, немного более подробно:
input[type="text"], input[type="password"]
Ответ 2
Вы читаете это неправильно. E[foo~="warning"]
выберет любой элемент, который предупреждает о нем список, разделенный пробелом. Например: <el foo="test warning etc" />
Ответ 3
Просто следуйте этому:
HTML:
<div class="contact-form">
<label for="">Name</label>
<input type="text">
<label for="">Email</label>
<input type="email">
<label for="">Subject</label>
<input type="text">
<label for="">Message</label>
<textarea></textarea>
<input type="submit" value="Send">
</div>
CSS:
.contact-form input[type="text"], input[type="email"]{
width:100%;
box-sizing:border-box;
border:1px solid black;
padding:5px;
}
.contact-form input[type="submit"]{
display:block;
color:black;
background-color:white;
border:1px solid black;
border-radius:10px;
margin-top:10px;
padding:10px;
cursor:pointer;
margin:auto;
margin-top:20px;
}
Я надеюсь, вы понимаете это.