How to change the background of a CSS-only checkbox?

Asked

Viewed 10,051 times

5

CSS in width and heigth has an effect, because background-color nay?

input{
  width: 20px;
  height: 20px;
}
input:checked{
  background-color: blue;
  width: 25px;
  height: 25px;
}
<input type="checkbox">

html5 css3

  • Good friend, some properties are applicable to all elements. As for example the Checkbox does not contain background-color property.

  • Right, but, as then has checbox like this materialize https:/materializecss.com/checkboxes.html, they create a div?

  • Well the checkbox it does not have the background-color property, but it has the background-image property.. From what I saw.. the image is kind of altered when you mark with checked with some kind of slowly effect that makes it so interesting!! Take two images... of checkbox in google img, and apply at checkbox.

  • @Leandrade did you ever inspect the object to see how it’s done? Similar to what @Mauroalexandre suggested, the materializecss stylizes a <label> who has the checkbox within

  • Opa Ricardo, I inspected yes, but did not understand, how it is done no.

  • What you don’t understand, @Leandrade ?

  • The materialize checkbox changes color.

Show 2 more comments

3 answers

2

Currently with CSS3 you can customize a checkbox, however it is worth noting that there is no certain way to do, there are actually several methods, some cross-browser and others not.

Label

The most common method used in frameworks known, is to use label to incorporate the checkbox.

<label class="chk">
    <input type="checkbox" name="exemplo" />
    <span></span>
</label>

In this example (default), the input is inside the checkbox and the span serves as "anchor" for the style.

Applying the CSS, it is already possible to have some results.

.chk input {
    display: none;
}

.chk span {
    width: 12px;
    height: 12px;
    display: block;
    background-color: #fff;
    border: 1px solid #DDD;
}

.chk input:checked + span {
    background-color: #c03;
}
<label class="chk">
    <input type="checkbox" name="exemplo" />
    <span></span>
</label>

You can use images instead of color, the cool thing about using this method is that you can totally control the span

2


As each colleague says user-agente of each browser has its "default style" for some HTML components, among them you can easily repair some inputs as radio, checkbox, select, etc in Firefox is different from Chrome which is different from Safari etc, as you can see in this image.

inserir a descrição da imagem aqui

underlined textIn the case of Checkbox you can solve this by taking all the default properties of user-agente using all:unset in the element.

See in the element below that I stylized the input checkbox the way you wanted to just clean the styles default.

input{
    all: unset;
    border: 1px solid black;
  width: 20px;
  height: 20px;
  display: inline-block;
}
input:checked{
  background-color: blue;
  width: 25px;
  height: 25px;
}
<input type="checkbox" name="" id="">

-1

.container-label{
  display: block;
  position: relative;
  padding-left: 20px;
  font-size: 12px;
  color: #424242;
  font-weight: 400;

}

.container-label input{
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;

}

.checkmark{
  position: absolute;
  top: 0;
  left: 0;
  height: 15px;
  width: 15px;
  background-color: white;
  border: 1px solid gray;
  border-radius: 2px;
}
.container-label input:checked ~ .checkmark{
  background-color: #002D32;
  border: none;
}

.checkmark::after{
  display: none;
  content: '';
  position: absolute;
}

.container-label .checkmark::after{
  content: '';
 left: 4px;
 top: 0px;
 width: 5px;
 height: 9px;
 transform: rotate(45deg);
 border-right: 3px solid #fff;
 border-bottom: 3px solid #fff;

}

.container-label input:checked ~ .checkmark::after{
  display: block;
}
<label class="container-label">
                    One
                    <input type="checkbox" checked="checked">

                    <span class="checkmark"></span>

                  </label>

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.