CSS3 input 꾸미기

June 20, 2019 by dbsgud5

회원가입

Name*

Email*

Company

Phone

* 필요한 정보

우리는 가입자의 정보를 무단으로 사용하지 않습니다.

HTML 코드

<form id="contact-form">
<header id="content-header">
<h3>회원가입</h3>
</header>
<div>
<label>Name*</label>
<input type="text">
</div>
<div>
<label>Email*</label>
<input type="email">
</div>
<div>
<label>Company</label>
<input type="text">
</div>
<div>
<label>Phone</label>
<input type="text">
</div>
<div>
<em>* 필요한 정보</em>
<input type="submit" value="가입">
</div>
<div class="clearfix"></div>
<div class="content-footer">
<p>우리는 가입자의 정보를 무단으로 사용하지 않습니다.</p>
</div>
</form>

CSS 코드

#content-header h3 {
font-size: 24px;
font-weight: bold;
padding-bottom: 20px
}
#contact-form {
padding:10px 15px 15px 15px; //패딩 설정
border:4px solid #4ea0d8; //테두리(경계) 설정
border-radius: 10px; //테두리 둥굴게
}
#contact-form div {
margin-bottom:20px;
}
#contact-form label {
display:inline-block; // inline-block 설정
width:100px;
font-weight: bold;
}
#contact-form input[type='text'], #contact-form input[type='email']{
border:#ccc 1px solid;
border-radius:5px;
height: 25px;
width:65%;
}
#contact-form input[type='submit']{
padding: 12px 18px;
color:#fff;
background: #fa6e3e;
border:0;
border-radius: 5px;
float:right;
display:block;
}
#contact-form input[type='submit']:hover{ // input type 버튼의 효과(마우스 댔을 때)
background: #d55427;
cursor:pointer; // 커서를 올리면 마우스 모양이 나오게 설정
}
#contact-form .content-footer p { // 클래스 접근 시 . 사용, id 접근 시 # 사용
font-style: italic;
text-align: center;
color: #666;
font-size: 80%;
}