It's working great. But I have some buttons that I want apply a new style called .differentbutton.
.differentbutton
{
color:red;
}
However, it seems the default style that I set on input over write the class. Is there a fix for this? I added !important but that doesn't work either. I tried to avoid to go to each button and apply class style to each button.
All styles declared at the element level (inline) will override any available CSS styles.
You might want to take a look at the order of your CSS classes to determine how to best override them. Is your input specific style declared prior to your custom "different button" style? CSS takes precedence into consideration to determine which styles
overwrite one another.
If you declare your custom style after your input one, it will take precedence and overwrite your initial one if possible :
<-- This button will appear as normal -->
<input type='button' value='Normal' />
<-- This button will have red text -->
<input type='button' class='differentbutton' value='Red' />
I just tried it in JSBin and it looked just fine (I'm not sure what it is supposed to look like). (Example)
What browser are you using? It's likely that your browser may not support some of the CSS3 features being used with the styles. CSS3 features such as gradients, rounded-corners, and shadows are still not fully supported across all major browsers.
You might want to consider using a polyfill like
CSS3PIE if you are using an older browser or older versions of Internet Explorer.
I'm using IE10 on a Surface and it appears fine. I may have to take a look at it in Chrome, as I would think it would work in Chrome above nearly every other browser.
Keep in mind that gradients are not widely supported within Internet Explorer yet (with the exception of IE10), but using this along with a combination of the other gradient styles that you provided should cover most bases. You
may need to use a polyfill such as CSS3PIE (as mentioned earlier) if you find areas where support is lacking (especially in earlier versions of IE).
asplearning
Participant
909 Points
953 Posts
Apply CSS style to all input[type="button"] except some buttons??
Feb 28, 2013 12:57 AM|LINK
Hello everyone, I have written this css style to apply style to all input elements on my page.
input[type="button"], input[type="reset"], input[type="submit"] { font-size:15px; font-weight:normal; padding:6px 24px; text-decoration:none; }It's working great. But I have some buttons that I want apply a new style called .differentbutton.
.differentbutton { color:red; }However, it seems the default style that I set on input over write the class. Is there a fix for this? I added !important but that doesn't work either. I tried to avoid to go to each button and apply class style to each button.
Thanks.
However, it seems that the dif
Rion William...
All-Star
32152 Points
5233 Posts
Re: Apply CSS style to all input[type="button"] except some buttons??
Feb 28, 2013 01:36 AM|LINK
All styles declared at the element level (inline) will override any available CSS styles.
You might want to take a look at the order of your CSS classes to determine how to best override them. Is your input specific style declared prior to your custom "different button" style? CSS takes precedence into consideration to determine which styles overwrite one another.
If you declare your custom style after your input one, it will take precedence and overwrite your initial one if possible :
input[type="button"], input[type="reset"], input[type="submit"] { font-size:15px; font-weight:normal; padding:6px 24px; text-decoration:none; } .differentbutton { color: red; }The above CSS rules applied to this markup :
Example
You could also explicitly target buttons with that class as well by using :
input[type="button"].differentbutton { /* Your styles here */ }asplearning
Participant
909 Points
953 Posts
Re: Apply CSS style to all input[type="button"] except some buttons??
Feb 28, 2013 01:56 AM|LINK
Hello Rion. This is my class:
input[type="button"], input[type="reset"], input[type="submit"] { -moz-box-shadow:inset 0px 1px 0px 0px #ffffff; -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; box-shadow:inset 0px 1px 0px 0px #ffffff; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f5f5f4), color-stop(1, #dededd) ); background:-moz-linear-gradient( center top, #f5f5f4 5%, #dededd 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f4', endColorstr='#dededd'); border:1px solid #cdcdc6; background-color:#dbdbdb; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; display:inline-block; color:#636360 !important; font-size:15px; font-weight:normal; padding:6px 24px; text-decoration:none; } .differentbutton { color: #fff !important; background: #7ada4a; background: #7ada4a -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#7ada4a),color-stop(95%,#62c831),color-stop(100%,#53bf29)); background: #7ada4a -webkit-linear-gradient(top,#7ada4a,#62c831 95%,#53bf29); background: #7ada4a -moz-linear-gradient(top,#7ada4a,#62c831 95%,#53bf29); background: #7ada4a -o-linear-gradient(top,#7ada4a,#62c831 95%,#53bf29); background: #7ada4a -ms-linear-gradient(top,#7ada4a,#62c831 95%,#53bf29); background: #7ada4a linear-gradient(top,#7ada4a,#62c831 95%,#53bf29); border: 1px solid #509e19; border-bottom-color: #198d0f; border-top-color: #6dbe38; -webkit-box-shadow: 0 1px 3px rgba(38,151,72,0.5),inset 0 1px 0 #9fe662; -moz-box-shadow: 0 1px 3px rgba(38,151,72,0.5),inset 0 1px 0 #9fe662; box-shadow: 0 1px 3px rgba(38,151,72,0.5),inset 0 1px 0 #9fe662; text-shadow: 0 1px 0 #25a811; }This is the html mark up:
<input type="submit" value="Button" class="differentbutton" /> <input type="submit" value="Button" />Test this in jsfiddle. Doesn't work for me. Any idea why?
Thanks.
Rion William...
All-Star
32152 Points
5233 Posts
Re: Apply CSS style to all input[type="button"] except some buttons??
Feb 28, 2013 02:15 AM|LINK
I just tried it in JSBin and it looked just fine (I'm not sure what it is supposed to look like). (Example)
What browser are you using? It's likely that your browser may not support some of the CSS3 features being used with the styles. CSS3 features such as gradients, rounded-corners, and shadows are still not fully supported across all major browsers.
You might want to consider using a polyfill like CSS3PIE if you are using an older browser or older versions of Internet Explorer.
asplearning
Participant
909 Points
953 Posts
Re: Apply CSS style to all input[type="button"] except some buttons??
Feb 28, 2013 02:36 AM|LINK
I am using Chrome. The button with class is supposed to have green background. But it doesn't.
Rion William...
All-Star
32152 Points
5233 Posts
Re: Apply CSS style to all input[type="button"] except some buttons??
Feb 28, 2013 02:51 AM|LINK
Strange.
I'm using IE10 on a Surface and it appears fine. I may have to take a look at it in Chrome, as I would think it would work in Chrome above nearly every other browser.
Rion William...
All-Star
32152 Points
5233 Posts
Re: Apply CSS style to all input[type="button"] except some buttons??
Feb 28, 2013 03:17 AM|LINK
Add either input or input[type="button"] in front of your differentbutton CSS style:
input[type="button"].differentbutton { /* Your Style Here */ }or
input.differentbutton { /* Your Style Here */ }Example (Tested in Chrome)
asplearning
Participant
909 Points
953 Posts
Re: Apply CSS style to all input[type="button"] except some buttons??
Feb 28, 2013 07:03 AM|LINK
Rion this works for me. Do you know why this happens? Why does mentioning input[type="botton"] work in this case?
Thanks.
asplearning
Participant
909 Points
953 Posts
Re: Apply CSS style to all input[type="button"] except some buttons??
Feb 28, 2013 07:06 AM|LINK
Rion sorry. Jus test the example code in Internet explorer. It doesn't work in IE. does it work for you?
Again thanks.
Rion William...
All-Star
32152 Points
5233 Posts
Re: Apply CSS style to all input[type="button"] except some buttons??
Feb 28, 2013 11:42 AM|LINK
You'll need to use the CSS "filter" attribute as you are using in your normal button style :
Example
Keep in mind that gradients are not widely supported within Internet Explorer yet (with the exception of IE10), but using this along with a combination of the other gradient styles that you provided should cover most bases. You may need to use a polyfill such as CSS3PIE (as mentioned earlier) if you find areas where support is lacking (especially in earlier versions of IE).