How to add css for specific input type text

Question

When I was trying to add some input fields with css

I got a problem

I couldn't make more than one css for some input fields

this is the fields I have

<input type="text" name="firstName" />
<input type="text" name="lastName" />

and the css is

input
{
   background-image:url('images/fieldBG.gif');
   background-repeat:repeat-x;
   border: 0px solid;
   height:25px;
   width:235px;
}

I want to make the first field (firstName) with this css

input
{
   background-image:url('images/fieldBG.gif');
   background-repeat:repeat-x;
   border: 0px solid;
   height:25px;
   width:235px;
}

and the second one (lastName) with this css

input
{
   background-image:url('images/fieldBG2222.gif');
   background-repeat:repeat-x;
   border: 0px solid;
   height:25px;
   width:125px;
}

help please :-)

possible duplicate of What HTML/CSS would you use to create a text input with a background? — ghoppe
– ghoppe, Commented May 14, 2012 at 18:57
@Musa -- This one is a bit easier to read. net.tutsplus.com/tutorials/html-css-techniques/… — Chris Cudmore
– Chris Cudmore, Commented May 15, 2012 at 20:32

Andrew · Accepted Answer · 2012-05-14 18:54:17Z

100

You can style by type or name the form elements using CSS.

input[type=text] {
    //styling
}
input[name=html_name] {
    //styling
}

answered May 14, 2012 at 18:54

Andrew

6,44419 gold badges62 silver badges93 bronze badges

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

5 Comments

Andrew Over a year ago

In this case html_name is firstName/lastName

Dion Over a year ago

but you should put quotation marks around the value (not sure if it works without). Like input[type="text] - That's how I have always used it..

Andrew Over a year ago

@DRP96 practically right, I just wrote a generic statement (the quotes should be implicitly added).

Louis Tran Over a year ago

I don't know why this answer was not accepted.

Darkpsinight_2 Over a year ago

this solution works on Firefox only.

JH_ · Accepted Answer · 2017-03-04 08:53:15Z

9

Use the ID selector.

CSS:

input{
    background-repeat:repeat-x;
    border: 0px solid;
    height:25px;
    width:125px;
}

#firstname{
    background-image:url('images/fieldBG.gif');
}
#lastname{
    background-image:url('images/fieldBG2222.gif');
}

HTML:

<input type="text" ID="firstname" name="firstName" />    
<input type="text" ID="lastname" name="lastName" />

All your inputs will be styled with the generic input style, and the two special ones will have the styling specified by the ID selector.

edited Mar 4, 2017 at 8:53

JH_

4061 gold badge4 silver badges16 bronze badges

answered May 14, 2012 at 18:57

Chris Cudmore

30.2k12 gold badges60 silver badges96 bronze badges

2 Comments

Raults Over a year ago

This works, but it's generally bad practice to style with ID's. The below answer is a much better way to accomplish the task OP is trying to do.

Chris Cudmore Over a year ago

I disagree. Applying CSS to an ID instead of a class is exactly for this type of situation -- A one-off. Don't abstract a lone use case!

ViniciusPires · Accepted Answer · 2013-05-21 14:43:31Z

5

You have to change your HTML file:

<input type="text" name="firstName" /> 
<input type="text" name="lastName" />

...to:

<input type="text" id="FName" name="firstName" />
<input type="text" id="LName" name="lastName" />

And modify your CSS file to:

input {
    background-repeat:repeat-x;
    border: 0px solid; 
    height:25px; 
    width:125px;
}


#FName {
    background-image:url('images/fieldBG.gif');
}


#LName {
    background-image:url('images/fieldBG2222.gif');
}

Best of Luck!

edited May 21, 2013 at 14:43

ViniciusPires

1,0033 gold badges13 silver badges26 bronze badges

answered Feb 13, 2013 at 13:13

Ashu

3,5211 gold badge41 silver badges34 bronze badges

Comments

miniMacGuru · Accepted Answer · 2012-05-14 18:55:19Z

4

Add an 'id' tag to each of your inputs:

<input type="text" id="firstName" name="firstName" />
<input type="text" id="lastName" name="lastName" />

then you can use the #selector in CSS to grab each one.

input {
  background-repeat:repeat-x; 
  border: 0px solid;
  height:25px;
}

#firstName {
  background-image:url('images/fieldBG.gif');
  width:235px;
}

#lastName {
  background-image:url('images/fieldBG2222.gif');
  width:125px;
}

answered May 14, 2012 at 18:55

miniMacGuru

414 bronze badges

Comments

Donald Duck is with Ukraine · Accepted Answer · 2017-03-04 10:25:55Z

2

Use Classes to style. they are a better solution. using classes you can style each input type individually.

<html>
    <head>
        <style>
            .classnamehere {
                //Styling;
            }
        </style>
    </head>

    <body>
        <input class="classnamehere" type="text" name="firstName" />
    </body>
</html>

edited Mar 4, 2017 at 10:25

Donald Duck is with Ukraine

9,00223 gold badges82 silver badges106 bronze badges

answered Apr 7, 2015 at 18:52

DeathRs

1,12017 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to add css for specific input type text

5 Answers 5

5 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related