CODEWITHSUNDEEP
htmlcsscss-selectors
anubis
anubis

Reputation: 1505

CSS form input[type="text"] selector

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?

Upvotes: 6

Views: 22552

Answers (3)

Jonas m
Jonas m

Reputation: 2734

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

Upvotes: 15

Amor Jemni
Amor Jemni

Reputation: 1

Here's a method that resets all input elements of the form, as long as an input is type of text. It's part of search form, you can use console.log to view current element name/value For the instance, you could use similar approach to style elements from your form

resetForm(e) {
  const searchInput = this.formSearchUser.querySelectorAll('input[type="text"]');
  searchInput.forEach((elt) => {
    console.log(`${elt.name} = ${elt.value}`);
    if (elt.name !== "siteCode" || elt.name !== "expiredUsers") 
      elt.value = '';        
  });

Upvotes: 0

Abdulla Nilam
Abdulla Nilam

Reputation: 38584

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

Upvotes: 1

Related Questions