Установите флажок, установите цвет фона на отметке 70% внутри окна

Question

Я мог бы использовать некоторую помощь при стилизации моего поля флажка. Прямо сейчас, я сделал некоторые собственные css сам, и он работает очень хорошо. Теперь я просто должен иметь отмеченную метку внутри окна флажка.

код до сих пор:

input[type=checkbox] { 
    -webkit-appearance: none; 
    appearance: none; 
    width: 30px; /*Desired width*/ 
    height: 30px; /*Desired height*/ 
    cursor: pointer; 
    border: 1px solid #CCC; 
    border-radius: 2px; 
    background-color: #fcfbfb; 
    display: inline-block; 
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05); 
    color: black; 
    box-sizing: content-box; 
} 

input[type="checkbox"]:checked { 
    background-color: #002B45; 
    border-radius: 2px; 
    border: 1px solid #CCC; 
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05); 
    color: black; 
    cursor: pointer; 
} 

input[type="checkbox"]:focus { 
    outline: 0 none; 
    border-radius: 2px; 
    box-shadow: none; 
} 

Html код:

<div class="column small-12"> 
    <div class="checkbox">        
    @Html.CheckBoxFor(m => m.RememberMe, new { @class = "sbw_checkbox" }) 
    @Html.LabelFor(m => m.RememberMe, new { @class = "sbw_label" }) 
    </div> 
</div> 

Сделал несколько фотографий, чтобы вы могли увидеть, как это выглядит .. и то, что я пытаюсь для того чтобы достигнуть ,

Это когда его не проверили.

Это когда его проверили.

Это то, что я пытаюсь создать.

Может ли видеть, или есть что-то я могу попробовать?

Answer 1

Вы можете попробовать добавить некоторые стили с помощью :before

input[type="checkbox"]:checked:before { 
    content: ''; 
    background: #002B45; 
    position: absolute; 
    width: 15px; 
    height: 15px; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
} 

Убедитесь также добавить position: relative в input[type="checkbox"]:checked стиль, так что он будет центром в флажке.

Работает fiddle.