[英]Using a background-image for checkbox
我正在嘗試設置一些復選框,以便在未選中時使用我已有的一張圖像,然后在選中時使用另一張圖像。 這是我當前的復選框:
<input type="checkbox" name="fordCheckBox" value="Ford">
我還使用以下 CSS 來為每個復選框設置背景圖像。
input[type=checkbox][name=fordCheckBox] {
background:url("https://pbs.twimg.com/profile_images/550291079719698432/LbybHjIh.jpeg") no-repeat;
height: 25px;
width: 25px;
background-size: 50%;
}
input[type=checkbox][name=fordCheckBox]:checked {
background:url("http://contentservice.mc.reyrey.net/image_v1.0.0/2267461") no-repeat;
height: 25px;
width: 25px;
background-size: 50%;
}
正如您在我的JSFiddle 示例中看到的那樣,圖標大小正確,但它從未像應有的那樣設置背景圖像。 有什么建議么?
你可以用標簽來做
input[type=checkbox] {
display:none;
}
input[type=checkbox] + label {
display:inline-block;
padding: 0 0 0 0px;
background:url("https://pbs.twimg.com/profile_images/550291079719698432/LbybHjIh.jpeg") no-repeat;
height: 125px;
width: 125px;;
background-size: 50%;
}
input[type=checkbox]:checked + label {
background:url("http://contentservice.mc.reyrey.net/image_v1.0.0/2267461") no-repeat;
height: 125px;
width: 125px;
display:inline-block;
background-size: 50%;
}
html
<input type="checkbox" name="fordCheckBox" id="Ford" value="Ford">
<label for="Ford"></label>
請檢查更新的 jsfiddle https://jsfiddle.net/s4nr6q3d/
您實際上不應該嘗試直接更改復選框; 某些瀏覽器將始終顯示默認復選框。 通常的做法是為鏈接到輸入 ID 字段的復選框添加標簽。 例如:
<input type='checkbox' id='x' name='fordCheckBox'>
<label for='x'></label>
然后你將你的復選框設置為display: none
並且實際的 css 被應用到標簽上。 您的選擇器應如下所示: input[type=checkbox]:checked + label
我發現這篇文章將有助於解釋所有內容並逐步引導您完成:
我使用了這個 CSS。 在這個 CSS 中,當復選框被選中時,它會在復選框上放置一個勾號圖像。 默認情況下,它還會更改復選框的大小、顏色和邊框。
input[type='checkbox'] {
-webkit-appearance: none;
width: 30px;
height: 30px;
background: white;
border-radius: 5px;
border: 2px solid #555;
vertical-align:middle;
}
input[type='checkbox']:checked {
background-image: url("Images/tick-sm.png");
background-size: 90%;
background-position: right center;
background-repeat: no-repeat;
}
用您自己的圖像替換“Images/tick-sm.png”。
如果您也想要未選中狀態的不同背景,請將第二個塊的相同內容添加到第一個塊並替換圖像。
我做了一個“使用像復選框和收音機這樣的圖像純 Css”的例子
在 index.html 文件中:
<div class="cont-bg">
<div class="cont-title">Checkbox</div>
<div class="cont-main">
<div class="cont-checkbox">
<input type="checkbox" id="myCheckbox-1" />
<label for="myCheckbox-1">
<img
src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2021-mazda-mx-5-miata-mmp-1-1593459650.jpg?crop=0.781xw:0.739xh;0.109xw,0.0968xh&resize=480:*"
/>
<span class="cover-checkbox">
<svg viewBox="0 0 12 10">
<polyline points="1.5 6 4.5 9 10.5 1"></polyline>
</svg>
</span>
<div class="info">Mazda MX-5 Miata</div>
</label>
</div>
<div class="cont-checkbox">
<input type="checkbox" id="myCheckbox-2" />
<label for="myCheckbox-2">
<img
src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2020-chevrolet-corvette-c8-102-1571146873.jpg?crop=0.548xw:0.411xh;0.255xw,0.321xh&resize=980:*"
/>
<span class="cover-checkbox">
<svg viewBox="0 0 12 10">
<polyline points="1.5 6 4.5 9 10.5 1"></polyline>
</svg>
</span>
<div class="info">Toyota Supra</div>
</label>
</div>
</div>
<div class="cont-title">Radio</div>
<div class="cont-main">
<div class="cont-checkbox">
<input type="radio" name="myRadio" id="myRadio-1" />
<label for="myRadio-1">
<img
src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2021-mazda-mx-5-miata-mmp-1-1593459650.jpg?crop=0.781xw:0.739xh;0.109xw,0.0968xh&resize=480:*"
/>
<span class="cover-checkbox">
<svg viewBox="0 0 12 10">
<polyline points="1.5 6 4.5 9 10.5 1"></polyline>
</svg>
</span>
<div class="info">Mazda MX-5 Miata</div>
</label>
</div>
<div class="cont-checkbox">
<input type="radio" name="myRadio" id="myRadio-2" />
<label for="myRadio-2">
<img
src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2020-chevrolet-corvette-c8-102-1571146873.jpg?crop=0.548xw:0.411xh;0.255xw,0.321xh&resize=980:*"
/>
<span class="cover-checkbox">
<svg viewBox="0 0 12 10">
<polyline points="1.5 6 4.5 9 10.5 1"></polyline>
</svg>
</span>
<div class="info">Toyota Supra</div>
</label>
</div>
</div>
</div>
在 style.css 文件中:
* {
font-family: Lato;
margin: 0;
padding: 0;
--transition: 0.15s;
--border-radius: 0.5rem;
--background: #ffc107;
--box-shadow: #ffc107;
}
.cont-bg {
min-height: 100vh;
background-image: radial-gradient(
circle farthest-corner at 7.2% 13.6%,
rgba(37, 249, 245, 1) 0%,
rgba(8, 70, 218, 1) 90%
);
padding: 1rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.cont-title {
color: white;
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
}
.cont-main {
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;
}
.cont-checkbox {
width: 150px;
height: 100px;
border-radius: var(--border-radius);
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
background: white;
transition: transform var(--transition);
}
.cont-checkbox:first-of-type {
margin-bottom: 0.75rem;
margin-right: 0.75rem;
}
.cont-checkbox:active {
transform: scale(0.9);
}
input {
display: none;
}
input:checked + label {
opacity: 1;
box-shadow: 0 0 0 3px var(--background);
}
input:checked + label img {
-webkit-filter: none; /* Safari 6.0 - 9.0 */
filter: none;
}
input:checked + label .cover-checkbox {
opacity: 1;
transform: scale(1);
}
input:checked + label .cover-checkbox svg {
stroke-dashoffset: 0;
}
label {
display: inline-block;
cursor: pointer;
border-radius: var(--border-radius);
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
opacity: 0.6;
}
label img {
width: 100%;
height: 70%;
object-fit: cover;
clip-path: polygon(0% 0%, 100% 0, 100% 81%, 50% 100%, 0 81%);
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
label .cover-checkbox {
position: absolute;
right: 5px;
top: 3px;
z-index: 1;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--box-shadow);
border: 2px solid #fff;
transition: transform var(--transition),
opacity calc(var(--transition) * 1.2) linear;
opacity: 0;
transform: scale(0);
}
label .cover-checkbox svg {
width: 13px;
height: 11px;
display: inline-block;
vertical-align: top;
fill: none;
margin: 5px 0 0 3px;
stroke: #fff;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 16px;
transition: stroke-dashoffset 0.4s ease var(--transition);
stroke-dashoffset: 16px;
}
label .info {
text-align: center;
margin-top: 0.2rem;
font-weight: 600;
font-size: 0.8rem;
}
我做了一個“Angular - 使用像復選框和收音機這樣的圖像”的例子
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.