label 클릭했을때 색상 변경..
본문
버튼을 클릭했을때 label 안에 i 색상을 변경하고 싶습니다.
input[type="radio"]:checked + label i {background:red; color:#a32330;}
어떻게 해야할까요??
<input type ="radio" id="rachk_5" name="wr_2" value="5" <?php echo get_checked($write['wr_2'], '5'); ?>>
<div id="starpoint">
<label for="rachk_5">
<i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i></label></div>
답변 1
아래의 내용을 한번 참고해보세요..
1.CSS이용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Label Click Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
input[type="radio"] {
display: none; /* 라디오 버튼 숨기기 */
}
label i {
color: #a32330; /* 기본 색상 */
}
input[type="radio"]:checked + label i {
color: red; /* 선택된 라디오 버튼에 대한 스타일 */
}
</style>
</head>
<body>
<div id="starpoint">
<input type="radio" id="rachk_5" name="wr_2" value="5" <?php echo get_checked($write['wr_2'], '5'); ?>>
<label for="rachk_5">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</label>
</div>
</body>
</html>
2. 자바스크립트 이용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Label Click Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.active i {
color: red; /* 활성화된 스타일 */
}
label i {
color: #a32330; /* 기본 색상 */
}
</style>
</head>
<body>
<div id="starpoint">
<input type="radio" id="rachk_5" name="wr_2" value="5" <?php echo get_checked($write['wr_2'], '5'); ?>>
<label for="rachk_5">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</label>
</div>
<script>
document.querySelectorAll('input[type="radio"]').forEach(function(radio) {
radio.addEventListener('change', function() {
document.querySelectorAll('label').forEach(function(label) {
label.classList.remove('active');
});
document.querySelector('label[for="' + radio.id + '"]').classList.add('active');
});
});
</script>
</body>
</html>
답변 감사합니다.
참고가 많이 되었네요~^^
