クロムの入力タイプチェックボックスから影を削除しますか？

Question

入力タイプのチェックボックスからボックスシャドウを削除するにはどうすればよいですか？

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

は基本的に私は、私は国境、アウトライン、ボックスシャドウなどのようなさまざまな方法を試してみましたが、どれもの場合で働いていたん

へ

変換したいですタイプチェックボックス。
これまたは他の方法で便利なCSSですか？
クロムエンジンを使用するアプリ用ですので、Google Chromeでのみ動作させてください。

Answer 1

はここに私の解決策だ、私は実際のチェックボックスを非表示にし、必要なデザインを持つdiv要素でそれを置き換えるために使用され、また、チェックボックスの仕事を作るために必要なスクリプトを作りました。私は、カスタムチェックボックスの少し楽バージョンを作ったネジソリューションに触発

$(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>

Answer 2

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


<input type="checkbox" > 

チェックボックスの表示を解除するだけです。しかし、チェックして回避策を講じなければなりません。

ワーキングフィドルがここhttps://jsfiddle.net/d2tfo790/

Answer 3

。
イメージを使用しないため、スケーラビリティとカスタマイズが可能です。 CSS

$(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) 
    } 
} 

：

.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; 
} 

はここで働いている

<div> 

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

      <span>I agree</span> 

     </div> 

JS：HTML>true/false

を - ユーザーが$('#id_of_custom_checkbox').val()ことでカスタムチェックボックスの値を取得することができますフィドル：https://jsfiddle.net/JerryGoyal/xr62yara/8/