인프런 커뮤니티 질문&답변
작성한 질문수
input의 포커스되었을때 검정선이 사라지지 않아요
작성
·
50
0
안녕하세요 선생님
visivility: hidden;을하여도 외곽의 검정선이 없어지지 않네요
완성 예제파일도 같은 현상이 나오는데 어떻게 해결하면 좋을까요?
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>자손선택자vs자식선택자</title>
<link rel="stylesheet" href="/CSS/style.css" />
</head>
<body>
<form class="login">
<span>Email</span>
<input type="email" placeholder="Email Address">
<span>Password</span>
<input type="password" placeholder="password">
<p>
<label>
<input type="checkbox">
Keep me logged in
</label>
<a href="#none">Forgot Your Password?</a>
</p>
<button>Log in</button>
</form>@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap');
body{
font-family: 'Noto Sans KR', sans-serif;
line-height: 1.5em;
margin: 0;
font-weight: 300;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #222;
}
a{
text-decoration: none;
color: #222;
}
.login{
width: 800px;
background-color: #f5f5f5;
border: 1px solid #eee;
border-radius: 5px;
padding: 25px;
box-sizing: border-box;
box-shadow: 0 0 25px #00000026;
}
.login span {
font-weight: bold;
display: block;
margin-top: 20px;
}
.login input[type=email],
.login input[type=password] {
width: 100%;
padding: 15px;
box-sizing: border-box;
border: 1px solid #ddd;
border-radius: 5px;
padding-left: 40px;
transition: .3s;
}
.login input[type=email]:hover,
.login input[type=password]:hover {
border: 1px solid dodgerblue;
box-shadow: 0 0 5px dodgerblue;
}
.login input[type=email]::placeholder,
.login input[type=password]::placeholder{
font-style: italic;
}
.login input[type=email]:focus::placeholder{
visibility: hidden;
}
.login input[type=email]{
background:#fff url(/img/icon-email.png) no-repeat center left 10px;
}
.login input[type=password]{
background:#fff url(/img/icon-lock.png) no-repeat center left 10px;
}
.login p {
overflow: hidden;
}
.login p label {
float: left;
cursor: pointer;
}
.login p a {
float: right;
}
.login p a:hover {
text-decoration: underline;
}
.login button {
background-color: #2991b1;
color: #f5f5f5;
width: 300px;
padding: 10px;
outline: none;
border-radius: 5px;
border: none;
font-size: 24px;
transition: 0.3s;
}
.login button:hover{
background-color: #237a95;
}
답변 2
1
1
안녕하세요, 인프런 AI 인턴입니다. seoyoung님.
input 포커스 시 외곽선이 사라지지 않는 문제는 CSS에서 outline을 조정하여 해결할 수 있습니다. visibility: hidden; 속성은 요소의 가시성을 제어하는 것이며, outline(외곽선)과는 무관합니다. 포커스 시 외곽선을 없애려면 outline을 none으로 설정해야 합니다.
CSS 코드에서 다음과 같이 수정해 보세요:
.login input[type=email]:focus,
.login input[type=password]:focus {
border: 1px solid dodgerblue;
box-shadow: 0 0 5px dodgerblue;
outline: none; /* 포커스 시 외곽선을 없애줍니다 */
}
위와 같이 outline: none;을 추가해주시면 포커스 시 나타나는 기본 외곽선이 사라집니다.
참고 URL: input의 포커스 외곽선 제거하기
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.