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? thanks
This question is related to
css
hover
css-selectors
it looks like you need a rule very similar to your checked rule
#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 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/
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.
Source: Stackoverflow.com