CODEWITHSUNDEEP
htmlcss
Deddy
Deddy

Reputation: 213

Checkbox background color and style

I have read that due the different browser settings there aren't any good ways to style checkboxes. I know that you should be able to change background color with wrapping every checkbox into Div, but how about border and arraow?

But maybe someone have any tips to style them like this:

enter image description here

At the moment I have default in Firefox :

enter image description here

Upvotes: 1

Views: 21802

Answers (5)

zawhtut
zawhtut

Reputation: 8561

My mission was to work well with bootstrap. I used FontAwesome for content.

input[type=checkbox] {
    -moz-appearance:none;
    -webkit-appearance:none;
    -o-appearance:none;
    outline: none !important;
    content: none;  
}

input[type=checkbox]:before {
    font-family: "FontAwesome";
    content: "\f00c";
    font-size: 13px;
    border-radius:4px;
    color: transparent !important;
    background: #fff;
    display: block;
    width: 17px;
    height: 17px;
    border: 2px solid #d3d6db;
    margin-right: 7px;
   
}

input[type=checkbox]:checked:before {
  background: #3ea8df;
    color: rgba(255,255,255, 0.85) !important;
  border: 2px solid #3ea8df;
  border-radius:4px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="col-xs-6" >
  <input type="checkbox" name="chk"><span class="meme">Manga</span>
  </span>
<span>
<span class="col-xs-6" >
  <input type="checkbox" name="chk"><span class="meme">Comics</span>
  </span>
<span>

.meme {
  margin-top:4px;
}

Upvotes: 0

Toby Osborne
Toby Osborne

Reputation: 375

I believe the best way is to wrap the radio / checkbox in a span, div (whatever) then have a label with the for attribute linking to the id of the input.

Then hiding the input using visibility:hidden and styling the label however you would like. (Note you can have multiple labels for one input).

You can use a before or after to add the check marks.

.styled-radio {
  visibility:hidden;
  position:absolute;
  z-index:-2;
 }

.styled-radio-label {
  border:1px solid #ccc;
  height:15px;
  width:15px;
  position:relative;
}


.styled-radio:checked + .styled-radio-label:after {
  content:'\2713';
  position:absolute;
  left:50%;
  top:50%;
  transform:translateY(-50%) translateX(-50%);
}

label {
  display:inline-block;
  vertical-align:middle;
}
<span>
  <input type='radio' id='html' value='html' class='styled-radio' name='lang'/>
  <label for='html' class='styled-radio-label'></label>
  <label for='html'>HTML</label>
</span>

<span>
  <input type='radio' id='css' value='css' class='styled-radio' name='lang'/>
  <label for='css' class='styled-radio-label'></label>
  <label for='css'>CSS</label>
</span>

<span>
  <input type='radio' id='JS' value='JS' class='styled-radio' name='lang'/>
  <label for='JS' class='styled-radio-label'></label>
  <label for='JS'>JS</label>
</span>

Upvotes: 1

Paweł Kuna
Paweł Kuna

Reputation: 81

Deddy, you can style elements after <input> with css code input + div. If checkbox is checked try style input:checked + div. If you hide input element, and surround all with <label>, you can easily styling div element and other inside them. The rest depends on your imagination ;)

<label>
    <input type="checkbox">
    <div></div>
</label>

Upvotes: 0

Andrei Fedorov
Andrei Fedorov

Reputation: 3997

Use masked overlay

label {
  display: block;
  border: 4px solid #88a;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, .3) inset;
  border-radius: 10%;
  width: 1em;
  height: 1em;
}
input {
  display: none;
}
input:checked + label {
  background-color: rgba(0, 255, 0, .8);
  box-shadow: 0px 0px 2px rgba(0, 0, 0, .1) inset;
}
<input type="checkbox" id="chk">
<label for="chk"></label>

Upvotes: 3

Jaroslaw Jankowiak
Jaroslaw Jankowiak

Reputation: 40

If you use Fontawesome (http://fontawesome.io/icons/), you will be able to style this elements like any other font. Or http://www.inserthtml.com/2012/06/custom-form-radio-checkbox/

Upvotes: -1

Related Questions