<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>선택된 라디오 버튼의 스타일 적용하기 </title>
<style>
#signup input:checked+label {
/*input 요소에 checked 속성이 추가되었을때 label 요소의 스타일 */
color:red; /*글자색을 빨간색으로 지정*/
font-weight:bold; /*글꼴을 굵게 지정 */
}
#signup
{
background:#fff;
border:1px solid #222;
border-radius:5px;
padding:20px;
width:400px;
margin:30px auto;
}
#signup fieldset{
border:1px solid #ccc;
margin-bottom:30px;
}
#signup legend {
font-size:16px;
font-weight:bold;
padding-left:5px;
padding-bottom:10px;
}
#signup ul li {
line-height:30px;
list-style:none;
padding:5px 10px;
margin-bottom:2px;
}
</style>
</head>
<body>
<form>
<fieldset id="signup">
<legend>객실형태</legend>
<ul>
<li>
<input type="radio" name="room" id="basic">
<label for="basic">기본형(최대 2인)</label>
</li>
<li>
<input type="radio" name="room" id="family">
<label for="family">가족형(최대 8인)</label>
</li>
</ul>
</fieldset>
</form>
</body>
</html>
'css' 카테고리의 다른 글
| 10장 예제- 위치에 따라 자식 요소 선택하기 (0) | 2023.04.03 |
|---|---|
| 10장 예제 - not 선택자로 라디오 필드를 제외한 텍스트 필드 선택하기 (0) | 2023.04.01 |
| 10장 예제 - 앵커 대상에 스타일 적용하기 (0) | 2023.04.01 |
| 10장 예제 - 가상 클래스를 사용해 링크 스타일 적용하기 (0) | 2023.04.01 |
| 10장 실습 2 (0) | 2023.04.01 |
