반응형
확인란과 같은 이미지 사용
기본적으로 이미지를 사용하고 사용자가 이미지를 클릭하면 페이드아웃하고 확인란을 덮어씌우는 등의 표준 확인란을 사용하고 싶습니다.
본질적으로, 저는 당신이 특정 기준을 충족하는 이미지를 클릭하게 할 때 Recetcha 2와 같은 것을 하고 싶습니다.여기에서 Recetcha 데모를 볼 수 있지만 이미지 선택과 달리 텍스트 질문을 해결할 수도 있습니다.여기 스크린샷이 있습니다.
이미지 중 하나(이 경우 스테이크 사진 포함)를 클릭하면 클릭한 이미지의 크기가 줄어들고 선택한 것을 나타내는 파란색 체크 표시가 나타납니다.
제가 이 정확한 예를 재현하고 싶다고 가정해 보겠습니다.
9개의 숨겨진 확인란을 가질 수 있다는 것을 깨닫고 이미지를 클릭하면 숨겨진 확인란을 선택/선택 취소할 수 있도록 jQuery를 첨부합니다.하지만 이미지가 축소되거나 눈금이 겹쳐지는 것은 어떨까요?
순수 의미론적 HTML/CSS 솔루션
이것은 미리 만들어진 솔루션이 필요하지 않고 혼자서 쉽게 구현할 수 있습니다.또한 CSS를 사용하는 것이 쉽지 않아 보이기 때문에 많은 것을 배울 것입니다.
이것이 바로 여러분이 해야 할 일입니다.
에는 고유한 인란은야합니다어구가 .id특성.이를 통해 다음을 연결할 수 있습니다.<label>의 에것의, 사블용이를 for-어쨌든.
예:
<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1"><img src="http://someurl" /></label>
확인란에 레이블을 부착하면 브라우저 동작이 트리거됩니다.다른 사용자가 레이블(또는 레이블 내부의 이미지)을 클릭할 때마다 확인란이 전환됩니다.
다음으로, 예를 들어 확인란을 숨깁니다.display: none; 게하.
여러분이 하는 것만 .label::before유사 요소(시각적 확인란 대체 요소로 사용됨):
label::before {
background-image: url(../path/to/unchecked.png);
}
CSS의 마지까단서운, 은의신 CSS를 합니다.:checked확인란이 선택되었을 때 영상을 변경하려면 유사 선택기:
:checked + label::before {
background-image: url(../path/to/checked.png);
}
그+(자매 선택기 선택)는 마크업의 숨겨진 확인란 바로 뒤에 오는 레이블만 변경하도록 합니다.
두 넣고 변경 할 수 .background-position이미지를 스왑하는 대신
물론 레이블을 올바르게 배치하고 적용해야 합니다.display: block;그리고 정확하게 설정합니다.width그리고.height.
편집:
이러한 지침을 따라 만든 코드펜 예제와 스니펫은 동일한 기술을 사용하지만 확인란에 이미지를 사용하는 대신 확인란 교체가 순수하게 CSS로 수행되므로::before일단 확인되면, 가지고 있는 라벨에.content: "✓";둥근 테두리와 달콤한 전환을 추가하면 결과가 정말 마음에 들어요!
다음은 확인란에 이미지가 필요하지 않고 기술을 보여주는 작동 코드펜입니다.
다음은 스니펫의 동일한 코드입니다.
ul {
list-style-type: none;
}
li {
display: inline-block;
}
input[type="checkbox"][id^="cb"] {
display: none;
}
label {
border: 1px solid #fff;
padding: 10px;
display: block;
position: relative;
margin: 10px;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
label::before {
background-color: white;
color: white;
content: " ";
display: block;
border-radius: 50%;
border: 1px solid grey;
position: absolute;
top: -5px;
left: -5px;
width: 25px;
height: 25px;
text-align: center;
line-height: 28px;
transition-duration: 0.4s;
transform: scale(0);
}
label img {
height: 100px;
width: 100px;
transition-duration: 0.2s;
transform-origin: 50% 50%;
}
:checked+label {
border-color: #ddd;
}
:checked+label::before {
content: "✓";
background-color: grey;
transform: scale(1);
}
:checked+label img {
transform: scale(0.9);
box-shadow: 0 0 5px #333;
z-index: -1;
}<ul>
<li><input type="checkbox" id="cb1" />
<label for="cb1"><img src="https://picsum.photos/seed/1/100" /></label>
</li>
<li><input type="checkbox" id="cb2" />
<label for="cb2"><img src="https://picsum.photos/seed/2/100" /></label>
</li>
<li><input type="checkbox" id="cb3" />
<label for="cb3"><img src="https://picsum.photos/seed/3/100" /></label>
</li>
<li><input type="checkbox" id="cb4" />
<label for="cb4"><img src="https://picsum.photos/seed/4/100" /></label>
</li>
</ul>순수 CSS 솔루션
세 가지 깔끔한 장치가 실행됩니다.
- 선택기
- 유사 선택기
- css 속성입니다.
label:before {
content: url("https://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/unchecked_checkbox.png");
position: absolute;
z-index: 100;
}
:checked+label:before {
content: url("https://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/checked_checkbox.png");
}
input[type=checkbox] {
display: none;
}
/*pure cosmetics:*/
img {
width: 150px;
height: 150px;
}
label {
margin: 10px;
}<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR0LkgDZRDTgnDrzhnXGDFRSItAzGCBEWEnkLMdnA_zkIH5Zg6oag">
</label>
<input type="checkbox" id="myCheckbox2" />
<label for="myCheckbox2">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRhJjGB3mQxjhI5lfS9SwXou06-2qT_0MjNAr0atu75trXIaR2d">
</label>
<input type="checkbox" id="myCheckbox3" />
<label for="myCheckbox3">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQuwWbUXC-lgzQHp-j1iw56PIgl_2eALrEENUP-ld72gq3s8cVo">
</label>다음 jQuery 플러그인 참조: imgCheckbox(npm 및 bower)
고지 사항:이 문제를 해결하기 위해 자바스크립트가 필요하지 않습니다. 코드의 유지보수성과 효율성 사이에 긴장이 있습니다.플러그인(또는 자바스크립트)은 필요하지 않지만 빌드 속도가 빨라지고 변경이 더 쉬워집니다.
베어본 솔루션:
매우 간단한 HTML(확인란 및 레이블 등으로 엉망이 되지 않음):
<img class="checkable" src="http://lorempixel.com/100/100" />
jQuery의 toggleClass를 사용하여 설정/해제할 수 있습니다.selected또는checked에 관한 수업.click이벤트:
$("img.checkable").click(function () {
$(this).toggleClass("checked");
});
선택한 항목은 다음 항목으로 가져옵니다.
$(".checked")
게다가 시원함:
이를 기반으로 이미지에 스타일을 지정할 수 있지만, 큰 문제는 다른 DOM 요소가 없으면 사용할 수 없다는 것입니다.::before그리고.::after체크 표시 같은 것을 추가합니다.해결책은 이미지를 다른 요소로 감는 것입니다(클릭 수신기를 감는 요소에도 부착하는 것이 좋습니다).
$("img.checkable").wrap("<span class='fancychecks'>")
이것은 당신의 html을 정말 깨끗하고 js를 믿을 수 없을 정도로 읽을 수 있게 해줍니다.스니펫을 보세요...
/* Note that this js actually responds
to a click event on the wrapped element!
(not the image) */
$("img.checkable").wrap("<span class='fancychecks'>")
.parent().click(function() {
$(this).toggleClass("checked");
});/* style the images */
span.fancychecks img {
display: block;
margin: 0;
padding: 0;
transition-duration: 300ms;
transform: scale(1);
filter: none;
-webkit-filter: grayscale(0);
}
span.fancychecks.checked img {
transform: scale(0.8);
filter: gray;
filter: grayscale(1);
-webkit-filter: grayscale(1);
}
/* style the parent spans */
span.fancychecks {
padding: 0;
margin: 5px;
display: inline-block;
border: 1px solid transparent;
transition-duration: 300ms;
}
span.fancychecks.checked {
border-color: #ccc;
}
/* Using conexo's fantastic CSS, make the checkmarks */
span.fancychecks::before {
background-color: rgba(50, 200, 50, 0.7);
color: white;
content: "✓";
font-weight: bold;
border-radius: 50%;
position: absolute;
margin: 2px;
top: 1;
left: 1;
z-index: 1;
width: 25px;
height: 25px;
text-align: center;
line-height: 28px;
transform: scale(0);
transition-duration: 300ms;
}
span.fancychecks.checked::before {
transform: scale(1);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<img class="checkable" src="http://lorempixel.com/100/100/city/1" />
<img class="checkable" src="http://lorempixel.com/100/100/city/2" />
<img class="checkable" src="http://lorempixel.com/100/100/city/3" />imgCheckbox jQuery 플러그인 사용:
위의 솔루션에서 영감을 받아 다음과 같이 쉽게 사용할 수 있는 플러그인을 구축했습니다.
$("img").imgCheckbox();
- 선택한 이미지의 데이터를 양식에 삽입합니다.
- 사용자 지정 체크 표시 지원
- 맞춤형 CSS 지원
- 사전 선택된 요소 지원
- 이미지를 단순하게 전환하는 대신 라디오 그룹 지원
- 이벤트 콜백 있음
- 감지 가능한 기본값
- 가볍고 매우 사용하기 쉬운 제품
나는 추가적인 디브이를 추가할 것입니다.position: relative;그리고.class="checked"이미지와 동일한 너비/높이 및 위치를 가지는 경우left: 0; top: 0;아이콘을 포함합니다.으로 합니다.display: none;.
은 이제당들수있다니습을을 수 .click-이벤트:
$( '.captcha_images' ).click( function() {
$(this + '.checked').css( 'display', 'block' );
$(this).animate( { width: '70%', height: '70%' } );
});
이렇게 하면 아이콘을 가져오고 이미지 크기를 더 작은 방식으로 조정할 수 있습니다.
주의: 제 생각 뒤에 숨겨진 "논리"를 보여드리고 싶습니다. 이 예는 작동하지 않거나 버그가 있을 수 있습니다.
"Angular - 확인란 및 라디오와 같은 이미지 사용"의 예를 만들었습니다.
app.component.html 파일에서 다음을 수행합니다.
<div class="cont-bg">
<h5 class="text-white">Checkbox</h5>
<div class="cont-main">
<div class="cont-checkbox" *ngFor="let car of cars; index as i">
<input type="checkbox" [id]="'myCheckbox-' + i" />
<label [for]="'myCheckbox-' + i">
<img [src]="car.img" />
<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">{{ car.name }}</div>
</label>
</div>
</div>
<h5 class="text-white">Radio</h5>
<div class="cont-main">
<div class="cont-checkbox" *ngFor="let car of cars; index as i">
<input type="radio" name="myRadio" [id]="'myRadio-' + i" />
<label [for]="'myRadio-' + i">
<img [src]="car.img" />
<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">{{ car.name }}</div>
</label>
</div>
</div>
</div>
app.component.scss 파일에서 다음을 수행합니다.
* {
font-family: Lato;
--transition: 0.15s;
--border-radius: 0.5rem;
--background: #ffc107;
--box-shadow: #ffc107;
// --box-shadow: #0082ff;
}
.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-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);
transition: transform var(--transition);
background: white;
margin-bottom: 0.75rem;
margin-right: 0.75rem;
&:active {
transform: scale(0.9);
}
input {
display: none;
&:checked + label {
opacity: 1;
box-shadow: 0 0 0 3px var(--background);
.cover-checkbox {
opacity: 1;
transform: scale(1);
svg {
stroke-dashoffset: 0;
}
}
img {
-webkit-filter: none; /* Safari 6.0 - 9.0 */
filter: none;
}
}
}
label {
cursor: pointer;
border-radius: var(--border-radius);
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
opacity: 0.6;
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%);
}
.cover-checkbox {
position: absolute;
right: 5px;
top: 3px;
z-index: 1;
width: 23px;
height: 23px;
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);
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;
}
}
.info {
text-align: center;
margin-top: 0.2rem;
font-weight: 600;
font-size: 0.8rem;
}
}
}
app.component.ts 파일에서:
import { Component, VERSION } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
cars = [
{
id: '1',
name: 'Mazda MX-5 Miata',
img: '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:*',
},
{
id: '2',
name: 'Toyota Supra',
img: '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:*',
},
{
id: '3',
name: 'Chevy Corvette',
img: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2021-porsche-cayman-mmp-1-1593003674.jpg?crop=0.648xw:0.485xh;0.129xw,0.263xh&resize=980:*',
},
{
id: '4',
name: 'Porsche 718 Cayman',
img: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2021-porsche-718-cayman-mmp-1-1593003156.jpg?crop=0.735xw:0.551xh;0.138xw,0.240xh&resize=980:*',
},
{
id: '5',
name: 'Porsche 718 Boxster',
img: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2021-bmw-m2-mmp-1-1599687968.jpg?crop=0.706xw:0.528xh;0.102xw,0.268xh&resize=980:*',
},
{
id: '6',
name: 'BMW M2',
img: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2021-bmw-z4-mmp-1-1599583762.jpg?crop=0.779xw:0.584xh;0.0782xw,0.196xh&resize=980:*',
},
{
id: '7',
name: 'BMW Z4',
img: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2021-chevrolet-camaro-mmp-1-1585333717.jpg?crop=0.344xw:0.331xh;0.241xw,0.328xh&resize=980:*',
},
{
id: '8',
name: 'Chevy Camaro',
img: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2021-chevrolet-camaro-zl1-mmp-1-1604071262.jpg?crop=0.818xw:0.663xh;0.0799xw,0.163xh&resize=980:*',
},
{
id: '9',
name: 'Chevy Camaro ZL1',
img: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2021-chevrolet-camaro-zl1-mmp-1-1604071262.jpg?crop=0.818xw:0.663xh;0.0799xw,0.163xh&resize=768:*',
},
];
}
순수 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;
}<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>ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ<label> 안 되나요 일치를 합니다.for그리고.id 코드가.즉, 충돌하는 ID가 있으면 코드가 작동하지 않으므로 매번 고유한 ID를 만들어야 합니다.
또한, 만약 당신이 숨긴다면.input와 함께display:none또는visibility:hidden브라우저가 이에 초점을 맞추지 않습니다.
확인란과 해당 텍스트(또는 이 경우 이미지)는 레이블로 감쌀 수 있습니다.
.fancy-checkbox-label > input[type=checkbox] {
position: absolute;
opacity: 0;
cursor: inherit;
}
.fancy-checkbox-label {
font-weight: normal;
cursor: pointer;
}
.fancy-checkbox:before {
font-family: FontAwesome;
content: "\f00c";
background: #fff;
color: transparent;
border: 3px solid #ddd;
border-radius: 3px;
z-index: 1;
}
.fancy-checkbox-label:hover > .fancy-checkbox:before,
input:focus + .fancy-checkbox:before {
border-color: #bdbdff;
}
.fancy-checkbox-label:hover > input:not(:checked) + .fancy-checkbox:before {
color: #eee;
}
input:checked + .fancy-checkbox:before {
color: #fff;
background: #bdbdff;
border-color: #bdbdff;
}
.fancy-checkbox-img:before {
position: absolute;
margin: 3px;
line-height: normal;
}
input:checked + .fancy-checkbox-img + img {
transform: scale(0.9);
box-shadow: 0 0 5px #bdbdff;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<p>
<label class="fancy-checkbox-label">
<input type="checkbox">
<span class="fancy-checkbox"></span>
A normal checkbox
</label>
</p>
<p>
<label class="fancy-checkbox-label">
<input type="checkbox">
<span class="fancy-checkbox fancy-checkbox-img"></span>
<img src="https://picsum.photos/seed/1/100">
</label>
</p>다음은 확인란과 같은 이미지를 선택하는 간단한 예입니다.
Noken.js를 사용하여 업데이트된 예:
var imageModel = function() {
this.chk = ko.observableArray();
};
ko.applyBindings(new imageModel()); input[type=checkbox] {
display:none;
}
input[type=checkbox] + label
{
display:inline-block;
width:150px;
height:150px;
background:#FBDFDA;
border:none;
}
input[type=checkbox]:checked + label
{
background:#CFCFCF;
border:none;
position:relative;
width:100px;
height:100px;
padding: 20px;
}
input[type=checkbox]:checked + label:after
{
content: '\2713';
position:absolute;
top:-10px;
right:-10px;
border-radius: 10px;
width: 25px;
height: 25px;
border-color: white;
background-color: blue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<input type='checkbox' name='image1' value='image1' id="image1" data-bind="checked: chk"/><label for="image1"></label><label for="image1"><img class='testbtn'/></label>
<div data-bind="html: chk"></div>WordPress & GravityForms를 사용하는 모든 사용자가 양식을 생성하고 확인란 필드에 게시물 목록과 관련 기능 섬네일을 자동으로 입력할 수 있도록 허용된 답변을 확장하려면 다음과 같이 하십시오.
// Change '2' to your form ID
add_filter( 'gform_pre_render_2', 'populate_checkbox' );
add_filter( 'gform_pre_validation_2', 'populate_checkbox' );
add_filter( 'gform_pre_submission_filter_2', 'populate_checkbox' );
add_filter( 'gform_admin_pre_render_2', 'populate_checkbox' );
function populate_checkbox( $form ) {
foreach( $form['fields'] as &$field ) {
// Change '41' to your checkbox field ID
$field_id = 41;
if ( $field->id != $field_id ) {
continue;
}
// Adjust $args for your post type
$args = array(
'post_type' => 'pet',
'post_status' => 'publish',
'posts_per_page' => -1,
'tax_query' => array(
array(
'taxonomy' => 'pet_category',
'field' => 'slug',
'terms' => 'cat'
)
)
);
$posts = get_posts( $args );
$input_id = 1;
foreach( $posts as $post ) {
$feat_image_url = wp_get_attachment_image( get_post_thumbnail_id( $post->ID ), 'thumbnail' );
$feat_image_url .= '<br />' . $post->post_title;
if ( $input_id % 10 == 0 ) {
$input_id++;
}
$choices[] = array( 'text' => $feat_image_url, 'value' => $post->post_title );
$inputs[] = array( 'label' => $post->post_title, 'id' => "{$field_id}.{$input_id}" );
$input_id++;
}
$field->choices = $choices;
$field->inputs = $inputs;
}
return $form;
}
그리고 CSS:
.gform_wrapper .gfield_checkbox li[class^="gchoice_2_41_"] {
display: inline-block;
}
.gform_wrapper .gfield_checkbox li input[type="checkbox"][id^="choice_2_41_"] {
display: none;
}
.gform_wrapper .gfield_checkbox li label[id^="label_2_41_"] {
border: 1px solid #fff;
padding: 10px;
display: block;
position: relative;
margin: 10px;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
label[id^="label_2_41_"]:before {
font-family: "font-icons";
font-size: 32px;
color: #1abc9c;
content: " ";
display: block;
background-color: transparent;
position: absolute;
top: -5px;
left: -5px;
width: 25px;
height: 25px;
text-align: center;
line-height: 28px;
transition-duration: 0.4s;
transform: scale(0);
}
label[id^="label_2_41_"] img {
transition-duration: 0.2s;
transform-origin: 50% 50%;
}
:checked + label[id^="label_2_41_"] {
border-color: #ddd;
}
/* FontAwesome tick */
:checked + label[id^="label_2_41_"]:before {
content: "\e6c8";
background-color: transparent;
transform: scale(1);
}
:checked + label[id^="label_2_41_"] img {
transform: scale(0.9);
box-shadow: 0 0 5px #333;
z-index: 0;
}
언급URL : https://stackoverflow.com/questions/30663562/use-images-like-checkboxes
반응형
'programing' 카테고리의 다른 글
| 공용 생성자가 없는데 어떻게 Oracle Exception을 모의/가짜/스티븐할 수 있습니까? (0) | 2023.07.25 |
|---|---|
| JQuery.load() 콜백 함수 (0) | 2023.07.25 |
| Moodle에서 동적 링크 버튼을 만드는 방법 (0) | 2023.07.25 |
| 메이븐에서 유닛 테스트를 실행하기 위한 임베디드 데이터베이스로 오라클을 사용하는 방법은 무엇입니까? (0) | 2023.07.25 |
| Import 후 기존 데이터에 대해 MariaDB 데이터베이스의 모든 제약 조건을 검증하는 방법은 무엇입니까? (0) | 2023.07.25 |