Custom Check Box is not showing in Google Chrome
I want to create a custom checkbox in HTML with CSS. When I am running this code in IE, it’s working properly, but when I try to run it in Google Chrome, it’s showing the default checkbox, not my custom one.
What modification do I need to run it in Chrome?
HTML
<link href="btn.css" rel="stylesheet" type="text/css" />
</head开发者_Go百科>
<body>
<input type="checkbox" class="check" />
</body>
CSS
.check {
width:81px;
height:78px;
border: 3px ridge;
border-color:red;
border-style:outset;
font:Verdana, Geneva, sans-serif;
font-style:italic;
font-size:16px;
font-weight:bold;
color:red;
}
It seems like checkbox styling in WebKit (the rendering engine used by Chrome) is all-or-nothing.
You can turn off all default styles using -khtml-appearance: none (you might nowadays require -webkit-appearance: none or just appearance: none), but I believe that will literally give you no visible checkbox styles, so you’ll have to rebuild the whole thing using the :checked pseudo-class and background images.
See:
- http://www.webkit.org/blog/17/the-new-form-controls-checkbox-2/
- http://acidmartin.wordpress.com/2009/07/17/using-css-to-style-radiobuttons-and-checkboxes-for-safari-and-chrome/
That's because IE supports CSS it shouldn't support. Checkboxes can't be edited a lot with CSS, Firefox and Chrome do it right... You could use a background image as a checkbox layout or just make your own with JS.
加载中,请稍侯......
精彩评论