Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Input type="button" not overriding styles with class, but normal button is?

Tags:

html

css

class

I have a button class that I'm using that overrides the gradients of my default button or input type="button" elements. Here is the code for the defaults:

input[type="button"], input[type="submit"], input[type="reset"], button {
  background:#05ABE0;
  background:linear-gradient(to bottom, #87E0FD 0%, #53CBF1 25%, #05ABE0 50%);
  background:-moz-linear-gradient(top, #87E0FD 0%, #53CBF1 25%, #05ABE0 50%);
  background:-ms-linear-gradient(top, #87E0FD 0%, #53CBF1 25%, #05ABE0 50%);
  background:-o-linear-gradient(top, #87E0FD 0%, #53CBF1 25%, #05ABE0 50%);
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #87E0FD), color-stop(25%, #53CBF1), color-stop(50%, #05ABE0));
  background:-webkit-linear-gradient(top, #87E0FD 0%, #53CBF1 25%, #05ABE0 50%);
  border:solid 2px #0076A3;
  border-radius:0.3em;
  -moz-border-radius:0.3em;
  -o-border-radius:0.3em;
  -webkit-border-radius:0.3em;
  font-size:1em;
  padding:0.4em;
  display:inline-block;
  margin-right:5px;
  margin-left:5px;  
  font-family:Helvetica Neue, Helvetica, Arial, sans-serif;
  color:white;
  vertical-align:middle;
  text-shadow:rgba(0, 0, 0, 0.7) 0px 2px 2px; 
  box-shadow:inset 0 1px 1px white;
  -moz-box-shadow:inset 0 1px 1px white;
  -webkit-box-shadow:inset 0 1px 1px white;     
  background-size:100% 200%;
  -moz-background-size:100% 200%;
  -o-background-size:100% 200%;
  -webkit-background-size:100% 200%; 
  -moz-transition:all 0.1s linear;
  -o-transition:all 0.1s linear;
  -webkit-transition:all 0.1s linear;
}

Here is the override class:

.orange {
  border:2px solid #BF4619;
  background: #FF7700;
  background:linear-gradient(to bottom, #FFD0A8 0%, #FFAE68 25%, #FF7700 50%);
  background:-moz-linear-gradient(top, #FFD0A8 0%, #FFAE68 25%, #FF7700 50%);
  background:-ms-linear-gradient(top, #FFD0A8 0%, #FFAE68 25%, #FF7700 50%);
  background:-o-linear-gradient(top, #FFD0A8 0%, #FFAE68 25%, #FF7700 50%);
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFD0A8), color-stop(25%, #FFAE68), color-stop(50%, #FF7700));
  background:-webkit-linear-gradient(top, #FFD0A8 0%, #FFAE68 25%, #FF7700 50%);
  background-size:100% 200%;
  -moz-background-size:100% 200%;
  -o-background-size:100% 200%;
  -webkit-background-size:100% 200%; 
}

When I use <button type="button" class="orange">Orange button</button> it works fine, but when I use <input type="button" class="orange" value="Orange button" /> it reverts to the default styling that is not in the orange class. Why is this?

PS: How do I do a multiline-indent on Stackoverflow? That's why my code is all in the same block in the example.

like image 806
Witch-King Avatar asked Mar 24 '23 07:03

Witch-King


1 Answers

Leniel Macaferi is right, but he doesn't explain why. The reason is specificity, which determines cascade order for rules with the same importance and origin; in both CSS2 and CSS3, input[type="button"] has specificity 11, as it has one attribute selector and one type selector, while .orange has specificity 10, as it has one class selector. In the case of the button selector, the specificity is 1 as button is an element type, thus .orange overrides it. (In the case where specificity is the same, later selectors in the document take priority.)

Fix: use .orange.orange instead of .orange to obtain a specificity of 20, as repeated simple selectors are explicitly allowed in CSS3 (so it should work in most modern browsers, and any old ones that don't try to be smart and not increase specificity for repeated simple selectors).

Alternate fix: [type="button"] instead of input[type="button"] would instead reduce the specificity of the first rule, but could create problems if non-input elements in your HTML have type="button" set, as shown in this JSFiddle.

Usage of !important for each property would also solve your problem, but that's only really useful when the rule has one or two properties as you have to apply !important to each property.

More info:
http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#specificity
http://www.w3.org/TR/selectors/#specificity

like image 106
JAB Avatar answered Apr 05 '23 23:04

JAB