CSS multiple input[type] selectors

Solution 1:

Yep, you've got it round the wrong way. The selector is to search within a space seperated list.. i.e.

<element attribute="text password" />

you could find using:

element[attribute~="text"]

The benefit of this is that it shouldn't match:

<element attribute="textual password" />

Hope that helps?

To achieve what you're actually trying to do is a bit more verbose:

input[type="text"], input[type="password"]

Solution 2:

Just follow this:

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;
}

I hope you understand it.

Solution 3:

You are reading it wrong. E[foo~="warning"] will select any element that has warning it a space separated list. Like this: <el foo="test warning etc" />