Change CheckBox Bild zu benutzerdefinierten Bild

Question

Ich habe ein div mit benutzerdefinierten Kontrollkästchen erstellt und ich möchte das Kontrollkästchen Bild von dem benutzerdefinierten Bild ändern. und ich habe es getan, aber ich bin nicht in der Lage, die Größe des Bildes zu ändern. Bitte helfen Sie mir.

Jede Hilfe wird geschätzt.

  <div class="left"> 

         <input id="Option" type="checkbox"> 
      <label class="checkbox" for="Option"> </label> 
      </div> 

Und CSS, die ich verwendet habe.

.checkbox { 
display: inline-block; 
cursor: pointer; 
font-size: 13px; line-height:18px; 
} 
input[type=checkbox] { 
display:none; 
} 
.checkbox:before { 
content: ""; 
display: inline-block; 
width: 25px; 
height: 25px; 
vertical-align: middle; 
background-color: rgb(248,183,51); 
color: #f3f3f3; 
text-align: center; 
} 
input[type=checkbox]:checked + .checkbox:before { 
content: url("images/Tick.png"); 
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); 
font-size: 15px; 
} 

Answer 1

Hauptsache ich Hintergründe gesetzt background-size-cover tat.

.checkbox { 
 
display: inline-block; 
 
cursor: pointer; 
 
font-size: 13px; line-height:18px; 
 
} 
 

 
input[type=checkbox] { 
 
display:none; 
 
} 
 

 
.checkbox:before { 
 
content: ""; 
 
display: inline-block; 
 
width: 40px; 
 
height: 40px; 
 
vertical-align: middle; 
 
background-color: rgb(248,183,51); 
 
color: #f3f3f3; 
 
text-align: center; 
 
} 
 

 
input[type=checkbox]:checked + .checkbox:before { 
 
background: url("https://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/checked_checkbox.png"); 
 
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); 
 
font-size: 15px; 
 
background-size: contain; 
 

 
}

<div class="left"> 
 
    <input id="Option" type="checkbox"> 
 
    <label class="checkbox" for="Option"> </label> 
 
</div>

Answer 2

Sie können dies tun, ohne Bilder zu verwenden, nur mit einfachen Zeichen und CSS, so dass Sie Änderung auf Ihrer benutzerdefinierten Checkbox nur mit der Anpassung font-size oder wechselnden Farben machen kann.

Bitte siehe Beispiel unten:

/* Base for label styling */ 
 
[type="checkbox"]:not(:checked), 
 
[type="checkbox"]:checked { 
 
    position: absolute; 
 
    left: -9999px; 
 
} 
 
[type="checkbox"]:not(:checked) + label, 
 
[type="checkbox"]:checked + label { 
 
    position: relative; 
 
    padding-left: 25px; 
 
    cursor: pointer; 
 
} 
 

 
/* checkbox aspect */ 
 
[type="checkbox"]:not(:checked) + label:before, 
 
[type="checkbox"]:checked + label:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left:0; top: 2px; 
 
    width: 17px; height: 17px; 
 
    border: 1px solid #aaa; 
 
    background: #f8f8f8; 
 
    border-radius: 3px; 
 
    box-shadow: inset 0 1px 3px rgba(0,0,0,.3) 
 
} 
 
/* checked mark aspect */ 
 
[type="checkbox"]:not(:checked) + label:after, 
 
[type="checkbox"]:checked + label:after { 
 
    content: '✔'; 
 
    position: absolute; 
 
    top: 3px; left: 4px; 
 
    font-size: 18px; 
 
    line-height: 0.8; 
 
    color: #09ad7e; 
 
    transition: all .1s; 
 
    transform-origin: center; 
 
} 
 
/* checked mark aspect changes */ 
 
[type="checkbox"]:not(:checked) + label:after { 
 
    opacity: 0; 
 
    transform: scale(0); 
 
    transform-origin: center; 
 
} 
 
[type="checkbox"]:checked + label:after { 
 
    opacity: 1; 
 
    transform: scale(1); 
 
    transform-origin: center; 
 
} 
 
/* disabled checkbox */ 
 
[type="checkbox"]:disabled:not(:checked) + label:before, 
 
[type="checkbox"]:disabled:checked + label:before { 
 
    box-shadow: none; 
 
    border-color: #bbb; 
 
    background-color: #ddd; 
 
} 
 
[type="checkbox"]:disabled:checked + label:after { 
 
    color: #999; 
 
} 
 
[type="checkbox"]:disabled + label { 
 
    color: #aaa; 
 
} 
 
/* accessibility */ 
 
[type="checkbox"]:checked:focus + label:before, 
 
[type="checkbox"]:not(:checked):focus + label:before { 
 
    border: 1px dotted blue; 
 
} 
 

 
/* hover style just for information */ 
 
label:hover:before { 
 
    border: 1px solid #4778d9!important; 
 
} 
 

 

 

 

 

 

 
/* Useless styles, just for demo design */ 
 

 
body { 
 
    font-family: "Open sans", "Segoe UI", "Segoe WP", Helvetica, Arial, sans-serif; 
 
    color: #777; 
 
} 
 
h1, h2 { 
 
    margin-bottom: 5px; 
 
    font-weight: normal; 
 
    text-align: center; 
 
} 
 
h2 { 
 
    margin: 5px 0 2em; 
 
    color: #aaa; 
 
} 
 
form { 
 
    width: 80px; 
 
    margin: 0 auto; 
 
} 
 
.txtcenter { 
 
    margin-top: 4em; 
 
    font-size: .9em; 
 
    text-align: center; 
 
    color: #aaa; 
 
} 
 
.copy { 
 
margin-top: 2em; 
 
} 
 
.copy a { 
 
text-decoration: none; 
 
color: #4778d9; 
 
}

<form action="#"> 
 
    <p> 
 
    <input type="checkbox" id="test1" /> 
 
    <label for="test1">Red</label> 
 
    </p> 
 
    <p> 
 
    <input type="checkbox" id="test2" checked="checked" /> 
 
    <label for="test2">Yellow</label> 
 
    </p> 
 
    <p> 
 
    <input type="checkbox" id="test3" checked="checked" disabled="disabled" /> 
 
    <label for="test3">Green</label> 
 
    </p> 
 
    <p> 
 
     <input type="checkbox" id="test4" disabled="disabled" /> 
 
     <label for="test4">Brown</label> 
 
    </p> 
 
</form>

oder Sie können auch auf CodePen überprüfen: Custom Checkbox Without images

---

(Edited)

Cu stom Checkbox Eigenschaft background-image

Überprüfen Sie bitte die folgenden anschauliches Beispiel für eine benutzerdefinierte Checkbox background-image:

.checkbox { 
 
display: inline-block; 
 
cursor: pointer; 
 
font-size: 13px; line-height:18px; 
 
} 
 
input[type=checkbox] { 
 
display:none; 
 
} 
 
.checkbox:before { 
 
content: ""; 
 
display: inline-block; 
 
width: 25px; 
 
height: 25px; 
 
vertical-align: middle; 
 
background-color: rgb(248,183,51); 
 
color: #f3f3f3; 
 
text-align: center; 
 
} 
 
input[type=checkbox]:checked + .checkbox:before { 
 
    background: url("https://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/checked_checkbox.png") no-repeat center center; 
 
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); 
 
font-size: 15px; 
 
background-size: 10px 10px; 
 
}

<div class="left"> 
 
    <input id="Option" type="checkbox"> 
 
    <label class="checkbox" for="Option"> </label> 
 
</div>

• Bitte stellen Sie sicher, dass Ihr Bild vorhanden ist richtige Weg.
• Beachten Sie auch, dass Sie Ihr Hintergrundbild neu positionieren können, indem Sie die horizontale und vertikale Position für die Hintergrundeigenschaft festlegen.