checkbox formatting and functionality

Question

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.

DavidDomain · Accepted Answer · 2016-01-15 08:41:44Z

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>

Aer0 · Accepted Answer · 2016-01-15 08:43:35Z

1

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.

answered Jan 15, 2016 at 8:43

Aer0

3,91720 silver badges35 bronze badges

Comments

Mi-Creativity · Accepted Answer · 2016-01-15 08:57:36Z

1

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

edited Jan 15, 2016 at 8:57

answered Jan 15, 2016 at 8:33

Mi-Creativity

9,66410 gold badges40 silver badges49 bronze badges

2 Comments

qadenza Over a year ago

can't believe. anyway thanks. let's say - solved. In fact, graphic and text are not vertically aligned yet.

Mi-Creativity Over a year ago

Now they are jsfiddle.net/Mi_Creativity/j6Lbn3nc/2 , just added position:relative; top:2px; to the ::before

Collectives™ on Stack Overflow

checkbox formatting and functionality

3 Answers 3

Comments

Comments

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

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

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

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related