How can I apply CSS on all buttons which are present in that page?
I have created a CSS style class:
.btn {
color:#050;
font: bold 84% 'trebuchet ms',helvetica,sans-serif;
background-color:#fed;
border:1px solid;
border-color: #696 #363 #363 #696;
}
How can I apply this CSS style class to all buttons which are pr开发者_高级运维esent in the page without adding class="btn"
to every button?
If your buttons are <input type="button">
or submit, then this should do it:
input[type="button"], input[type="submit"] {
color:#050;
font: bold 84% 'trebuchet ms',helvetica,sans-serif;
background-color:#fed;
border:1px solid;
border-color: #696 #363 #363 #696;
}
Otherwise, if your buttons are <button>
:
button {
color:#050;
font: old 84% 'trebuchet ms',helvetica,sans-serif;
background-color:#fed;
border:1px solid;
border-color: #696 #363 #363 #696;
}
To grab all three kinds of buttons:
button, input[type="button"], input[type="submit"] {
color:#050;
font: bold 84% 'trebuchet ms',helvetica,sans-serif;
background-color:#fed;
border:1px solid;
border-color: #696 #363 #363 #696;
}
button{
color:#050;
font: bold 84% 'trebuchet ms',helvetica,sans-serif;
background-color:#fed;
border:1px solid;
border-color: #696 #363 #363 #696;
}
OR
input[type="button"]{
color:#050;
font: bold 84% 'trebuchet ms',helvetica,sans-serif;
background-color:#fed;
border:1px solid;
border-color: #696 #363 #363 #696;
}
input[type=submit], input[type=button], button {
...
}
If you don't want to explicitly set all the styles, but want to use the styles already defined in some pre-existing class (for example the bootstrap btn-default class), you could do something like this:
<script>
$("button").addClass("btn-default");
</script>
In my case this was what I was looking for, although I'm sure there is some sort of caveat about doing it this way, or you'd expect it was something doable directly from CSS.
just a note
input[type="button"]
isn't going to work on old browsers like IE6. If that's a problem you will unfortunately need to add your class to each item.
精彩评论