CODEWITHSUNDEEP
htmlcsscheckbox
qadenza
qadenza

Reputation: 9293

checkbox formatting and functionality

HTML:

<input type="checkbox" id="checkentire"> PLAY ENTIRE LESSON
<br>
<input type="checkbox" id="checkloop"> LOOP

CSS:

input[type=checkbox] {
    width:45px;     
    margin:5px 0;
    cursor:pointer;
    vertical-align:middle;
}
input[type=checkbox]:hover {
    background:lightgreen;
}

Problems:
1. input[type=checkbox]:hover - doesn't work at all.
2. cursor:pointer - works only on graphic symbol, not on text.
3. width:45px - increases graphic margins instead of graphic itself.
4. vertical-align:middle - graphic and text are not aligned.
5. turning on and off works only by clicking on graphic, instead on graphic and text.

Upvotes: 0

Views: 55

Answers (3)

Mi-Creativity
Mi-Creativity

Reputation: 9664

In many times to control the look and size of the checkbox you need to use "custom checkboxes", benefits are having consistent look on browsers (*), also you can have circles instead of squares, or blue instead of red, and you can have :hover for the label itself too, possibilities are many, just like this:

JS Fiddle -updated 2

#test-checkbox{
  display:none;
}
#test-checkbox + label{
  color:black;
  cursor:pointer;
}
#test-checkbox:checked + label{
  color:#0A0;
  cursor:pointer;
}
#test-checkbox + label:hover{
  outline:1px dotted blue;
  outline-offset:4px;
}
#test-checkbox + label::before{
  content:'';
  width:12px;
  height:12px;
  display:inline-block;
  border:2px solid #AAA;
  border-radius:3px;
  margin-right:5px;
  cursor:pointer;
  position:relative;
  top:2px;
}
#test-checkbox:checked + label::after{
  width:5px;
  height:12px;
  content:'';
  display:inline-block;
  border-right:4px solid #0A0;
  border-bottom:4px solid #0A0;
  position:absolute;
  left:14px;
  top:6px;
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
   transform: rotate(45deg);
}
<input id="test-checkbox" type="checkbox">
<label for="test-checkbox">Check Me</label>

--------------------------------------------------------------------------------

(*) IE8 doesn't support the pseudo elements ::before and ::after which are the correct syntax, it supports :before and :after which are also supported by other browsers, for more information check ::before and ::after

Upvotes: 1

Aer0
Aer0

Reputation: 3907

You may try this to get your checkbox:hover working.

https://jsfiddle.net/k7hcgjk5/1/

In fact, you can not directly customize your checkbox. Instead, simply create a custom checkbox styled span which does that for you.

EDIT: Well, I forgot. Obviously, to handle your checked state, you need to add a customization for that as well. I updated the fiddle accordingly.

Upvotes: 1

DavidDomain
DavidDomain

Reputation: 15303

You can wrap your checkbox element inside a wrapper element and work with relative and absolute positioning. That makes it easy to control the width and vertical alignment as well as the hovering state and the fact that you can click on the label text to check the checkbox.

Here is an example. This is actually kind of what bootstrap does.

.checkbox-wrapper {
  position: relative;
  display: inline-block;
  width: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  background:tomato;
  padding: 0 20px;
}

.checkbox-wrapper label {
  display: inline-block;
  max-width: 100%;
  min-height: 40px;
  line-height: 40px;
  vertical-align: middle;
  padding-left: 20px;
  cursor: pointer;
}

.checkbox-wrapper input[type=checkbox] {
  position: absolute;
  margin: 0 0 0 -20px;
  top: 50%;
  transform: translate(0,-50%);
}

.checkbox-wrapper:hover {
  background:lightgreen;
}
<div class="checkbox-wrapper">
  <label for="checkentire">
    <input type="checkbox" id="checkentire">
    PLAY ENTIRE LESSON
  </label>
</div>

Upvotes: 1

Related Questions