CODEWITHSUNDEEP
javascripthtmlcssgoogle-chrome
GorvGoyl
GorvGoyl

Reputation: 49680

remove shadow from input type checkbox in chrome?

How can I remove box shadow from an input type checkbox.

< input type="checkbox" name="run" value="" style="" >

Basically I want to transform

enter image description here

to

enter image description here

I tried different ways like border,outline, box-shadow etc but none worked in case of type checkbox.
Any handy css for this or any other way?
Please note that this is for an app which uses chromium engine so, I want this to work on Google Chrome only.

Upvotes: 1

Views: 5118

Answers (3)

GorvGoyl
GorvGoyl

Reputation: 49680

Inspired by Neji solution I made a little easier version of a custom checkbox.
It uses no images so it is scalable and customizable. The user can get the value of custom checkbox by $('#id_of_custom_checkbox').val() -> true/false

HTML:

<div>

            <div id='mycheckbox' class='custom-checkbox'>
                <div class='custom-tick'></div>
            </div>

            <span>I agree</span>

        </div>

JS:

$(document).ready(function () {
    $('.custom-checkbox').click(function (e) {
        toggleCustomCheckbox(e.target);
    })
});

function toggleCustomCheckbox(el) {
    var tickEl = $(el).find('.custom-tick').addBack('.custom-tick');
    if (tickEl.css('visibility') === 'hidden') {
        tickEl.css('visibility', 'visible')
        $('.custom-checkbox').val(true)
        alert('you ticked me')
    } else {
        tickEl.css('visibility', 'hidden')
        $('.custom-checkbox').val(false)
        alert('you un-ticked me')
    }

}
function setCustomCheckbox(checkboxid, val) {
    var tickEl = $(checkboxid).find('.custom-tick').addBack('.custom-tick');
    if (val && val === true) {
        tickEl.css('visibility', 'visible')
        $('.custom-checkbox').val(true)
    }
    else {
        tickEl.css('visibility', 'hidden')
        $('.custom-checkbox').val(false)
    }
}

CSS:

.custom-checkbox{
    border: solid 2px orange;
    height: 15px;
    width: 15px;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
  }
.custom-tick{
    border: inherit;
    display: inherit;
    cursor: inherit;
    visibility: hidden;
    height: 8px;
    width: 5px;
    transform: rotate(45deg);
    border-left: 0;
    border-top: 0;
    border-width: 2px;
    margin: 0px 0px 3px 4px;
}

Here's the working fiddle: https://jsfiddle.net/JerryGoyal/xr62yara/8/

Upvotes: 1

Neji Soltani
Neji Soltani

Reputation: 1511

Here's my solution , I used to hide the actual checkbox and then replace it with a div with the required design , also made the needed script to make the checkbox work.

$(document).ready(function() {
  $('.control--checkbox').click(function() {

      if ($('#mycheckbox').is(':checked')) {
        $('#mycheckbox').attr('checked', false);
      } else {
        $('#mycheckbox').attr('checked', true);
      }
    }

  );
});
.control input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.control__indicator {
  position: absolute;
  top: 2px;
  left: 0;
  height: 20px;
  width: 20px;
  border: 1px solid black;
}

.control input:disabled~.control__indicator {
  opacity: 0.6;
  pointer-events: none;
}

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

.control input:checked~.control__indicator:after {
  display: block;
}

.control--checkbox .control__indicator:after {
  left: 8px;
  top: 4px;
  width: 3px;
  height: 8px;
  border: solid black;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="container">
  <div class="control-group">

    <label class="control control--checkbox">
      <input type="checkbox" id="mycheckbox" checked="checked"/>
      <div class="control__indicator"></div>
    </label>
  </div>
</div>

Upvotes: 2

Krishna9960
Krishna9960

Reputation: 529

input[type="checkbox"]{
  height: 140px;
  width: 140px;
 -webkit-appearance: unset !important;
  border: 1px solid red;
}


<input type="checkbox" >

Just unset the appearance of checkbox. But then on check you have to do a workaround.

Working Fiddle here https://jsfiddle.net/d2tfo790/

Upvotes: -1

Related Questions