CSS

[CSS] - <input type=" ">에 효과 주기, 둥근 테두리 만들기

Riucc 2018. 9. 18. 02:03

○ <input type=" ">에 효과 주기, 둥근 테두리 만들기

 

※ id 접근 시에는 # 사용, class 접근 시에는 . 사용한다


<input type="text">

#contact-form input[type='text'] {

    border-radius:5px; // 테두리 둥글게 5px 값을 준다

}


<input type="submit" value="가입">

#contact-form input[type='submit']{ 

    border-radius: 5px;

}

#contact-form input[type='submit']:hover{ // :hover 는 input type 버튼의 마우스 댔을 때 효과

    cursor:pointer;  // 커서를 올리면 마우스 모양이 나오게 설정한다

}


// index.html

<link rel="stylesheet" href="css/style.css" type="text/css"> // CSS 참조하여 사용하기 위해

<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>


// style.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']{ // input type 접근 !!!

    border:#ccc 1px solid;

    border-radius:5px;

    height: 25px;

    width:65%;

}


#contact-form input[type='submit']{ // input type 접근 !!!

    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%;

}


저작자표시