CSS form input[type="text"] selector

Question

I'm using CSS to style my HTML page.

Can I with selector:

form input[type="text"]

change the form of one input the type text? Just one et the others are with this CSS?

Answer 1

I don't really get your question. But you have a few options

Will style every input typed text. <input type="text" />

form input[type="text"] {}

Will style the level first only input typed text

form >input[type="text"] {}

Will style the first only input

form input[type="text"]:first-child {}

Will style the input typed text with class "foo"

form input.foo[type="text"] { }

So. Lets say you have a form

<form action="" method="POST">
<input type="text" name="text" class="foo" />
<input type="text" name="text2" class="bar" />
</form>

This will target all inputs

form input[type="text"] { border:2px solid #000000; }

This will target only the first input with the class "foo"

form input.foo[type="text"] { background-color:red; }

This will target the second input with the class "bar"

form input.bar[type="text"] { background-color:green; }

Click here to view on CodePen

Answer 2

You can use

input[type="text"]
input[type="button"]
input[type="password"]
input[type="number"]
input[type="email"]

For Example

input[type="text"] {
    width: 150px;
    display: block;
    margin-bottom: 10px;
    background-color: yellow;
}

W3School Attribute Selector