checkbox, radio 버튼 - label 작동 안됨
4593
조은별
작성한 질문수 3
1
save-forgot-login클래스의 checkbox를 작동시킬 때, label을 클릭하면 작동했다가 원래 상태로 돌아가게 되네요. 그리고 체크박스 이미지 부분은 클릭할 때 작동 자체가 안되네요.. (input 의 display:block을 해제하고 클릭해보면 제대로 작동됨) 이유가 뭔지 알고싶습니다.
( receive-email-login 클래스의 radio부분도 마찬가지로, 작동했다가 원래 상태로 바로 돌아갑니다 ㅠ)
[ HTML ]
<section>
<form action="" class="login">
<button class="container">
<h1> Login Accounts </h1>
<div class="user-login">
<!-- 이것이 로그인 뿐만 아니라, 이외에 등등 많이 사용될 수 있음. 따라서 재활용을 위해 class이름을 field로 저장해놓는 것 좋음 -->
<span class="field"> User email <input type="email" class="email" placeholder="Type your email"> </span>
<span class="field"> User Password <input type="password" class="password" placeholder="Type your password"> </span>
</div>
<div class="save-forgot-login">
<label for="save-email"><input type="checkbox" id="save-email" checked><em></em> Save your email </label>
<a href="#none">forgot password? </a>
</div>
<div class="receive-email-login">
<span>Would you like to receive event emails?</span>
<!-- checkbox가 아니라,radio임. -->
<label><input type="radio" name="event" checked><em></em> Yes </label>
<label><input type="radio" name="event"><em></em> No</label>
</div>
<input type="button" class="login-btn" value="LOGIN">
<div class="or-login">
Or Login using
<div class="sns-login-icon">
<a href="#none"><i class="xi-google"></i></a>
<a href="#none"><i class="xi-facebook"></i></a>
<a href="#none"><i class="xi-naver"></i></a>
<a href="#none"><i class="xi-kakaotalk"></i></a>
</div>
</div>
<div class="signup-info">
<span>Have not account yet?</span>
<a href="#none">SIGN UP</a>
</div>
</div>
</form>
</section>
[ CSS ]
/* font-family: 'Noto Sans KR', sans-serif */
/* Montserrat */
/* Fredoka */
/* Source Sans Pro */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&family=Montserrat:wght@400;500&family=Noto+Sans+KR:wght@100;300;400;500&family=Source+Sans+Pro:wght@200;300;400&display=swap');
/* XEION CDN */
@import url('http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css');
/* Fontawesome 4.7 */
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
body{
margin:0;
width: 100%; height: 100vh;
color: #222;
line-height: 1.5em;
font-weight: 300;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background: url("../[Final]-CSS 섹션 UI 디자인 - 커스텀 체크박스 로그인 폼/images/background.png") no-repeat center center;
background-size: cover;
}
a{
text-decoration: none;
color: #222;
text-align: center;
}
*{ box-sizing: border-box; font-family: 'Noto Sans KR', sans-serif; }
h1,h2,h3,h4,h5,h6{ margin:0; }
/* input, button에 기본적으로 outline없애주기 */
input, button{ outline:none; }
section{}
/* container */
.container{
width: 420px;
background-color: #fff;
border-radius: 10px;
padding:50px;
font-size: 14px;
border:none;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.155);
}
/* container heading */
.container h1{
font-size: 40px;
}
/* user-login */
.user-login{
text-align: left;
margin-top:30px;
}
.user-login .field{
display: block;
margin-top:20px;
font-family: Fredoka;
font-weight: 500;
}
input[type=email],
input[type=password]{
display: block;
border:none;
margin-top:5px;
width: 100%;
padding:7px;
border-bottom:1px solid #ccc;
position: relative;
padding-left:30px;
}
/* input 앞에 이미지 넣는 방법 */
input[type=email]{
background:url("../[Final]-CSS 섹션 UI 디자인 - 커스텀 체크박스 로그인 폼/images/icon-user.png") no-repeat center left 3px;
}
input[type=password]{
background:url("../[Final]-CSS 섹션 UI 디자인 - 커스텀 체크박스 로그인 폼/images/icon-password.png") no-repeat center left 3px;
}
input[type=email]::placeholder, input[type=password]::placeholder{
color: #aaa;
transition: 0.35s;
visibility: visible;
}
input[type=email]:focus::placeholder, input[type=password]:focus::placeholder{
opacity: 0;
/* 완벽하게 하려면 visibility를 넣어주는 것이 좋지만, 꼭 넣어줄 필요는 없음. */
visibility: hidden;
}
/* save-forgot-login */
.save-forgot-login{
margin:30px 0;
overflow: hidden;
}
.save-forgot-login label{
float: left;
}
.save-forgot-login input[id=save-email]{
display: none;
}
.save-forgot-login label{
cursor: pointer;
}
/* 인접해있는 em을 선택한다 (어디에 인접해있는 것인지를 명시할 필요 존재) */
.save-forgot-login input[id=save-email] + em{
background: url("../[Final]-CSS 섹션 UI 디자인 - 커스텀 체크박스 로그인 폼/images/icon-checkbox.png") no-repeat;
display: inline-block;
width: 18px; height: 18px;
background-position: left center;
vertical-align: middle; margin-top: -2px;
margin-right: 5px;
}
.save-forgot-login input[id=save-email]:checked + em{
background-position: right center;
}
.save-forgot-login a{
float: right;
}
/* receive-email-login */
.receive-email-login{}
.receive-email-login span{
display: block;
margin-bottom: 10px;
}
/* .receive-email-login input[type=radio]{display: none;} */
.receive-email-login label{
margin:7px;
}
/* .rdo-yes em, .rdo-no em{
display: inline-block;
width: 18px; height: 18px;
background-position:left center;
vertical-align: middle;
margin-right: 5px;
background-image: ("../[Final]-CSS 섹션 UI 디자인 - 커스텀 체크박스 로그인 폼/images/icon-radio.png");
} */
/* .rdo-yes.active em, .rdo-no.active em{
background-position: right center;
} */
input[name=event]{
display: none;
}
input[name=event] + em{
background: url("../[Final]-CSS 섹션 UI 디자인 - 커스텀 체크박스 로그인 폼/images/icon-radio.png") no-repeat;
background-position: left center;
width: 18px; height: 18px;
display: inline-block;
margin-right: 5px;
transform: translateY(3px);
z-index: 1;
}
input[name=event]:checked + em{
background-position: right center;
}
/* login-btn */
.login-btn{
width: 270px; padding:10px;
background: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%);
color: #fff;
border-radius: 20px;
margin: 20px;
border:none;
cursor: pointer;
}
/* or-login */
.or-login{
font-size: 14px;
}
.sns-login-icon{
padding-top:5px;
padding-bottom: 10px;
}
.sns-login-icon a{
display: inline-block;
width: 40px; height: 40px;
border-radius: 50%;
background-color: gray;
margin:5px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.155);
transition: 0.5s;
}
.sns-login-icon a:nth-child(1){ background-color: #dd4b39;}
.sns-login-icon a:nth-child(2){ background-color: #3b5999;}
.sns-login-icon a:nth-child(3){ background-color: #25D366;}
.sns-login-icon a:nth-child(4){ background-color: #ffdc00;}
.sns-login-icon a i{
font-size: 25px;
line-height: 40px;
color: #fff;
}
.sns-login-icon a:hover{
transform: rotateY(360deg);
}
/* signup-info */
.signup-info{}
.signup-info span{
/* a태그에 display:block을 하면, 클릭 가능한 크기가 block만큼 나오게 됨*/
display: block;
}
.signup-info a{
font-weight: 500;
}
.signup-info a:hover{
text-decoration: underline;
}
답변 2
1
올리신 코드로 한참을 해봤는데 전혀 문제가 없었으나...
html에 button이 왜 들어가 있죠? 이것 때문에 그런거에요.
이거 지우면 정상 작동합니다.
아마 div를 착각해서 button으로 하신 것 같아요.
<button class="container">
이거 지우고 <div class="container"></div> 묶어주세요.
1
일다 이미지 경로를 아래처럼 하시면 절대 안됩니다.
background:url("../[Final]-CSS 섹션 UI 디자인 - 커스텀 체크박스 로그인 폼/images/icon-user.png") no-repeat center left 3px;
위에 처럼 이미지 경로를 하시면 문제가 생깁니다.
코드 문제가 아니라 이미지 경로 문제로 이미지가 출력이 안됩니다.
비주얼스튜디오 코드로 루트 폴더 잡으시고 아래처럼 이미지 경로를 해주세요.
해당 작업하는 폴더를 루트 폴더로 잡아야 합니다.
background:url("images/icon-user.png") no-repeat center left 3px;
pointer-event:none;
1
77
1
실전 반응형 웹사이트 이미지 다운
1
80
2
87.JavaScript & jQuery - 유효성 체크 애니메이션 로그인폼(3)
1
66
2
목소리 좀 키워주세요.
1
136
2
PDF파일은 어디있나요?
1
183
2
실전 반응형 웹사이트
1
155
2
강의 내용 pdf가 제공되나요?
1
173
1
flex 가 부트스트랩 5 에 추가되었는데 float 를 실무에서 아직 많이 사용하나요 ?
1
220
1
다크모드 버튼 만들때 왜 <button> 이 아닌 <div> 를 사용하나요 ?
1
195
1
실전퍼블리싱 카테고리 탭메뉴 안에 Slick.js가 안먹힙니다ㅠㅠ
1
394
2
scss에 active 적용하는 방법
1
322
1
반응형이 안먹힐때 뭐가 문제일까요?? ㅜㅠ
1
1188
2
실전 넷플릭스 6 footer부분
1
270
2
.dark 적용 하는 법
1
214
1
JavaScript & jQuery - 검색창 확장하기(3)에서
1
304
2
포트폴리오 CSS Grid 반응형 레이아웃에서
1
296
1
폰트어썸 4.7 아이콘
2
481
1
넷플릭스 공식사이트 수업 header
1
239
1
JavaScript & jQuery - 푸터 패밀리사이트 셀렉트 커스텀 스타일(2)
1
555
2
loginForm input type=email, password 위치 css 오류
2
417
1
이미지 전환 후 잔상 효과
1
1313
4
안녕하세요. jquery 슬라이더에 대해 질문 있습니다.
1
299
1
btn 을 block 이 아닌 inline-block 으로 바꾸신 이유가 궁금합니다
1
492
1
flex나 grid 로 구현하는것과 비교하면 어떤가요?
1
421
1