회원가입 양식 라디오버튼 색상은 어떻게 변경해야하나요?
1703
작성자 없음
작성한 질문수 0
<!-- 02-signup.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
<title>회원가입</title>
<link href="./02-signup.css" rel="stylesheet">
</head>
<body>
<div class="flexBox">
<div class="formBox">
<div class="memberBox">
<h2>회원 가입을 위해<br>정보를 입력해주세요</h2><br>
<div>
<p>* 이메일</p>
<input type="text">
<hr class="hr-blue">
</div>
<div>
<p>* 이름</p>
<input type="text">
<hr class="hr-grey">
</div>
<div>
<p>* 비밀번호</p>
<input type="password">
<hr class="hr-grey">
</div>
<div>
<p>* 비밀번호 확인</p>
<input type="password">
<hr class="hr-grey">
</div><br>
<div class="flex-radio">
<div class="radio-control">
<input class="radio-group" type="radio" name="gender">여성
</div>
<div class="radio-control">
<input class="radio-group" type="radio" name="gender">남성
</div>
</div>
<div>
<h5><input class="check-control" type="checkbox">이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다.</h5>
</div>
<div>
<hr class="hr-grey">
<br>
</div>
<div>
<button>가입하기</button>
</div>
</div>
</div>
</div>
</body>
</html>
/* 02-signup.css */
* {
box-sizing: border-box;
}
.flexBox {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.formBox {
width: 670px;
height: 960px;
background: #FFFFFF;
border: 1px solid #AACDFF;
box-shadow: 7px 7px 39px rgba(0, 104, 255, 0.25);
border-radius: 20px;
margin-top: 60px;
margin-bottom: 60px;
}
.memberBox {
width: 470px;
height: 818px;
margin-top: 72px;
margin-bottom: 70px;
margin-left: 100px;
margin-right: 100px;
}
h2 {
width: 466px;
height: 94px;
font-family: 'Noto Sans CJK KR', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 32px;
line-height: 47px;
color: #0068FF;
}
p {
width: 158px;
height: 23.65px;
font-family: 'Noto Sans CJK KR', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #797979;
}
input {
height: 30px;
border: 0px;
}
.hr-blue {
width: 466px;
height: 0px;
border: 1px solid #0068FF;
}
.hr-grey {
width: 466px;
height: 0px;
border: 1px solid #CFCFCF;
}
.flex-radio {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.radio-control {
margin: 15px;
}
.radio-group {
width: 20px;
height: 19.95px;
accent-color: #EBEBEB;
border: 1px solid #D2D2D2;
vertical-align: -5px;
}
.check-control {
width: 20px;
height: 20px;
border: 1px solid #C4C4C4;
border-radius: 3px;
vertical-align: -6px;
margin-right: 15px;
}
button {
width: 470px;
height: 75px;
background: #FFFFFF;
border: 1px solid #0068FF;
border-radius: 10px;
}안녕하세요.
수업을 듣고 과제 회원가입 양식 CSS에 도전하여 피그마랑 유사하게 만드는 데에는 성공했습니다.
그런데 피그마를 보면 라디오 버튼이 회색이라 background 혹은 background-color 속성으로 적용을 해보니 색상이 변하지 않았고,
구글링으로 accent-color를 사용하면 input 태그의 색상을 변경할 수 있다고 해서 써보니 스샷처럼 체크할 때만 회색으로 나오네요.
혹시 다른 방법이 있을까요?
답변 1
2
안녕하세요 dudrl1410님
간단한 예제를 드리겠습니다 추가적으로 보시면 좋을것 같네요
선택되지 않은 라디오 버튼에 대한 스타일링
[type="radio"]:not(:checked) { border-color: #ccc; /* 선택되지 않은 라디오 버튼의 테두리 색상 */ }
선택된 라디오 버튼에 대한 스타일링
[type="radio"]:checked { border-color: #2196f3; }
싸이월드3
0
77
2
싸이월드2 관련 질문 드립니
0
92
3
과제 모범답안 유무
0
89
2
과제 연습 질문
0
71
2
<style> 에 *와 div 차이
0
86
2
과제 profile 부분 질문
0
112
2
과제 Profile 부분 질문
0
86
2
left_body_header의 자식border-top인데
0
77
2
정렬 연습중인데 왜 여성과 남성 칸이 가로로 배열 안되는지 모르겠습니다.
0
127
1
태그 궁금한 점
0
162
2
HTML 회원가입
0
192
2
문법관련 질문입니다
0
253
2
윈도우 누른치로 마침표 눌렀는데 이모지가 안되는데용.?./.
0
648
2
26분50초에 세로줄 어떻게 해요 ..? ㅎㅎㅎ
0
250
2
피그마에서 css 코드가 안보여요..
1
3217
2
주석기능을 하고 싶은데 컨트롤+느낌표가 안됩니다 ㅠㅠ
0
325
2
언어 설정 -> 한글
0
289
1
2024년 html
0
226
1
피그마 유료화
0
1670
1
Fiama 링크 찾기
0
239
2
Figma는 어디에 있나요?
0
251
1
안녕하세요. 제공되는 노션 학습자료는 어디서 확인가능한가요?
0
357
2
git 질문입니다
0
216
1
아무리 찾아봐도 피그마 링크가 보이질 않습니다.
0
312
1