CODEWITHSUNDEEP
htmlcss
SurajS
SurajS

Reputation: 496

applying different style to specific input button

check out this JSFiddle
I want to apply different style to second button. I guess there is just a different sytax. Help.

<input type="button">
<input type="button" class="button2">

I dont want to use id, beacause it's to be used for some other purpose.

Upvotes: 5

Views: 7266

Answers (5)

Swapnil Motewar
Swapnil Motewar

Reputation: 1088

Yes, you can do this.

jsFiddle: http://jsfiddle.net/swapnilmotewar/0dyk2n3b/4/

HTML:

<input type="button">
<input type="button" class="button2">

CSS:

input[type="button"]{
    width: 500px;
    background: red;
}
input[type="button"].button2{
    width: 100px;
    background: green;    
}

Upvotes: -1

Alex Char
Alex Char

Reputation: 33218

Specificity is the means by which a browser decides which property values are the most relevant to an element and gets to be applied. Specificity is only based on the matching rules which are composed of selectors of different sorts.

You can specificity the css selector using 'has' class add apply the rule to input button elements with class .button2:

input[type="button"] {
  width: 500px;
  background: red;
}
[type='button'].button2 {
  width: 100px;
  background: black;
}
<input type="button">

<input type="button" class="button2">

Also take a look Specificity.

Upvotes: 8

Paddy
Paddy

Reputation: 33867

Slight variation on Arvind's answer, but without use of important:

input[type="button"] {
  width: 500px;
  background: red;
}
input[type="button"].button2 {
  width: 100px;
  background: black ;
}
<input type="button">

<input type="button" class="button2">

Upvotes: 2

Gustaf Gun&#233;r
Gustaf Gun&#233;r

Reputation: 2267

<input type="button">

<input type="button" class="button2">


input[type="button"]{
    width: 500px;
    background: red;
}
input[type="button"].button2{
     width: 100px;
     background: black;

 }

Fiddle: http://jsfiddle.net/0dyk2n3b/1/

Upvotes: 3

hiero
hiero

Reputation: 220

Check this http://jsfiddle.net/0dyk2n3b/2/

 input.button2{
 width: 100px;
 background: black;
 }

Upvotes: 2

Related Questions