CSS: styled a checkbox to look like a button, is there a hover?
I've created a small looking button to display instead of a checkbox. I was wondering if there was a way to also have a :hover look somehow?
HTML:
<div id="ck-button">
<label>
<input type="checkbox" value="1"><span>red</span>
</label>
</div>
CSS:
div label input {
margin-right:100px;
}
body {
font-family:sans-serif;
}
#ck-button {
margin:4p开发者_开发百科x;
background-color:#EFEFEF;
border-radius:4px;
border:1px solid #D0D0D0;
overflow:auto;
float:left;
}
#ck-button label {
float:left;
width:4.0em;
}
#ck-button label span {
text-align:center;
padding:3px 0px;
display:block;
}
#ck-button label input {
position:absolute;
top:-20px;
}
#ck-button input:checked + span {
background-color:#911;
color:#fff;
}
Fiddle: http://jsfiddle.net/zAFND/2/
#ck-button:hover {
background:red;
}
Fiddle: http://jsfiddle.net/zAFND/4/
it looks like you need a rule very similar to your checked rule
http://jsfiddle.net/VWBN4/3
#ck-button input:hover + span {
background-color:#191;
color:#fff;
}
and for hover and clicked state:
#ck-button input:checked:hover + span {
background-color:#c11;
color:#fff;
}
the order is important though.
Do what Kelly said...
BUT. Instead of having the input
positioned absolute and top -20px
(just hiding it off the page), make the input box hidden.
example:
<input type="checkbox" hidden>
Works better and can put it anywhere on the page.
Do this for a cool border
and font
effect:
#ck-button:hover { /*ADD :hover */
margin:4px;
background-color:#EFEFEF;
border-radius:4px;
border:1px solid red; /*change border color*/
overflow:auto;
float:left;
color:red; /*add font color*/
}
Example: http://jsfiddle.net/zAFND/6/
精彩评论