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?

Change the form of one input type text. What does that mean? With that selector you select ALL <input/> elements that are inside a <form> and have type="text" — putvande
– putvande, Commented Jun 25, 2015 at 10:54
yes, with this selector I select all the inputs of type text. Can I change the form, using another selector for just 1 input the type text? — anubis
– anubis, Commented Jun 25, 2015 at 10:57
I have add a class to this input, and it do the css with it, but it doesn't take my new css, just the general: form input[type="text"]! — anubis
– anubis, Commented Jun 25, 2015 at 10:59
So you have a class for that input but you are trying to apply more general CSS with the selector in your question? But the input is not picking up on that? Might be because your new selector is further down the CSS file or more specific than your class is — putvande
– putvande, Commented Jun 25, 2015 at 11:03

Dale K · Accepted Answer · 2020-09-09 01:30:43Z

15

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

edited Sep 9, 2020 at 1:30

Dale K

28.1k15 gold badges59 silver badges85 bronze badges

answered Jun 25, 2015 at 10:57

Jonas m

2,7343 gold badges25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

anubis Over a year ago

That's exactly what I had tried and it didn't work. But now it work! Thanks for your good explanations, I'm sorry for my stupid question!!

Abdulla Nilam · Accepted Answer · 2015-06-25 11:05:36Z

1

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

edited Jun 25, 2015 at 11:05

answered Jun 25, 2015 at 11:03

Abdulla Nilam

39.6k18 gold badges85 silver badges114 bronze badges

2 Comments

putvande Over a year ago

This doesn't answer the question as OP already knows he/she can use that selector. And second, there is no input type="mail"it is email

Abdulla Nilam Over a year ago

@putvande thats what i explain with an example

Amor Jemni · Accepted Answer · 2019-04-10 13:34:24Z

0

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 = '';        
  });

answered Apr 10, 2019 at 13:34

Amor Jemni

1

Collectives™ on Stack Overflow

CSS form input[type="text"] selector

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related