프로그래밍/CSS
13 CSS Form
윤지(●'◡'●)
2021. 5. 3. 16:25
반응형
CSS Form
폼요소의 스타일을 결정할 수 있다.
1)focus
폼요소가 포커스를 가지고 있을 때 스타일을 설정한다.
[예시]
<style>
input{
width: 100%;
box-sizing: border-box;
padding: 10px 20px;
background-color: gold;
margin: 5px 0;
}
input[type = "text"]{
border-radius: 15px;
}
input[type = "text"]:focus{ /*text가 포커스 되었을 때 스타일*/
background-color: deepskyblue;
border: 3px dotted red;
}
input[type = "password"]{
border: none;
background-color: white;
border-bottom: 3px solid gray;
}
input[type = "password"]:focus{ /*password가 포커스 되었을 때 스타일*/
border-bottom: 3px dotted red;
}
</style><body>
<h2>폼 요소</h2>
<form>
<p>아이디 <input type="text" maxlength="20" placeholder="아이디를 입력하세요"></p>
<p>비밀번호 <input type="password" maxlength="20" placeholder="비밀번호를 입력하세요"></p>
</form>
</body>
[결과]
2) cursor: pointer
커서의 모양을 설정한다.
[예시]
<style>
input[type="button"], input[type="submit"], input[type="reset"]{
width: 160px;
background-color: forestgreen;
color: white;
border: none;
padding: 16px 32px;
margin: 5px 10px;
cursor: pointer;/*버튼에 커서가 올라가면 손가락 모양으로 바뀜*/
}
</style><body>
<form>
<p style="text-align: center;">
<input type="submit" value="회원가입">
<input type="reset" value="다시작성">
<input type="button" value="돌아가기">
</p>
</form>
</body>
[결과] 마우스 커서를 확인해주세요!
버튼위로 커서가 올라오면 손가락 모양으로 바뀌는것을 확인할 수 있다.
열심히 공부하고 있지만, 오류 사항이 존재 할 수 있습니다.
수정 사항이 존재 할 경우 알려주시면 감사하겠습니다 <(＿＿)>
반응형