开发者

How can I apply CSS on all buttons which are present in that page?

开发者 https://www.devze.com 2023-01-12 19:26 出处:网络
I have created a CSS style class: .btn { color:#050; font: bold 84% \'trebuchet ms\',helvetica,sans-serif;

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号