Подтвердить что ты не робот

Переключатели с несколькими входами [тип] CSS

Согласно спецификации W3 CSS, что-то вроде: input[type~="text password"] должно выбрать поля ввода, тип которых установлен как "текст" или "пароль", но он не работает! Я неправильно истолковал эту строку?

E [foo ~ = "warning" ] Соответствует любому элементу E, значение атрибута "foo" список значений, разделенных пробелами, один из которых в точности равен "Предупреждение".

источник спецификации CSS, это четвертый снизу в таблице.

4b9b3361

Ответ 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;
}

Я надеюсь, вы понимаете это.