CODEWITHSUNDEEP
htmlcss
khaled mahmoud
khaled mahmoud

Reputation: 97

checkbox styling and background

Is it possible to style check box like this, and change its background!

tried shadow box and the outline

the best I have reach is with the :before method but still not close

SS

here what I have tried

CSS

.table__check-box {
    background-color: red;
    position: relative;
    height: 1.75rem;
    width: 1.75rem;
    margin-right: 2.3rem;
    margin-top: 1rem;
}

.table__check-box--inactive {
    background-color: #a4a9ae;
}

.table__check-box:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 5px;
    border: 2px solid #ccc;
}

HTML

<input class="table__check-box" type="checkbox">

Upvotes: 0

Views: 55

Answers (2)

treatycity
treatycity

Reputation: 141

w3schools has a good post on this.

Tweaking their example slightly, you'll want to wrap your checkbox in a label, form elements should always have labels and it gives you the option to add an optional text label (like in the fiddle).

<label class="checkbox-container">
  <input type="checkbox" checked="checked">
  <span class="checkbox-state"></span>
</label>

<label class="checkbox-container">
  <input type="checkbox">
  <span class="checkbox-state"></span>
</label>

<label class="checkbox-container">
  <input type="checkbox">
  <span class="checkbox-state"></span>
</label>

 /* Customize the label (the container) */
.checkbox-container {
  display: block;
  position: relative;
  margin: 10px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Style the checkbox */
.checkbox-container input ~ .checkbox-state {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  display: block;
  width: 20px;
  height: 20px;
}

/* Style the checkbox */
.checkbox-container input:checked ~ .checkbox-state {
  background-color: #ccc;
}

Working fiddle: https://jsfiddle.net/zano29jd/

Upvotes: 1

Justinas
Justinas

Reputation: 43479

Input element does not have content, so there should be no :before. Better use table__check-box + label:before:

* {
  box-sizing: border-box;
}

.table__check-box {
  opacity: .3;// Just for display
  // Uncomment:
  // display: none;
}

.table__check-box + label {
    background-color: red;
    display: inline-block;
    position: relative;
    height: 1.75rem;
    width: 1.75rem;
    margin-right: 2.3rem;
    margin-top: 1rem;
    overflow: hidden;
    border-radius: 5px;
    border: 2px solid #ccc;
}

.table__check-box:not(:checked) + label {
    background-color: #a4a9ae;
}
<div class="input-wrapper">
  <input id="active-checkbox" class="table__check-box" type="checkbox"/>
  <label for="active-checkbox"></label>
</div>

Upvotes: 1

Related Questions