체크박스의 체크버튼 이미지로 변경

안녕하세요! Kboard Contact form으로 견적문의 게시판을 제작하고 있습니다.

현재 editor.php에 아래의 html 코드를 삽입하여 개인정보 동의 여부 체크박스를 만들었습니다.  

		<div style="margin-top:30px; padding-bottom:0px; border-bottom:0px;" class="kboard-attr-row">
			<label style="text-align: left;" class="attr-name" for="kboard_option_privacy"><span style="font-size:22px; font-weight: 400;">약관 동의</span></label>
		</div>
		<div style="padding-top:0px; border-bottom:0px; cursor: pointer;" class="kboard-attr-row">
			<div style="border:1px solid #b2b8bc; background: #f3f7fa; padding:27px 38px;" class="attr-value agree">
				<label style=" font-weight: 300; font-size: 16px; cursor: pointer;">
					<input type="checkbox" name="kboard_option_attendance" value="동의함"<?php if($content->option->attendance == '동의함'):?> checked<?php endif?> required>
					개인정보 취급방침에 동의합니다.
				</label>
			</div>
		</div>

그리고 그 체크박스의 모양을 이미지로 대체하기 위해 아래의 css 코드를 추가하였는데 (워드프레스 내의 사용자 정의 CSS 추가에 삽입하였습니다.)

background가 전혀 먹질 않는 것 같습니다 ㅠㅠ.

해결방안을 알려주시면 감사하겠습니다.

#kboard-contact-form-editor input[type=checkbox]{ 
	margin-right: 30px;
	width:22px;
	height:22px;
	background:url('/wp-content/uploads/2020/05/chk_ico_off.png') no-repeat !important;
}

#kboard-contact-form-editor input[type=checkbox]:checked { 
	background-image: url('/wp-content/uploads/2020/05/chk_ico_on.png'); }

항상 고생 많으십니다. 감사합니다.

워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기