- input
1) input 꾸미기
<style>
.search-wrap {
margin: 30px;
width: 500px;
height: 60px;
background: tan;
border-radius: 30px;
}
.search-wrap .search-form {
display: flex;
justify-content: center;
align-items: center;
height: 60px;
}
.search-wrap .search-form input[type=text] {
width: 400px;
height: 50px;
box-sizing: border-box;
border: transparent;
background: transparent;
}
.search-wrap .search-form input:focus {
outline: none;
}
.search-wrap .search-form button {
border: none;
background: transparent;
}
.search-wrap .search-form button i {
font-size: 30px;
}
</style>
</head>
<body>
<div class="search-wrap">
<form action="#" method="get" class="search-form">
<label for="search" class="hide">검색</label>
<input type="text" id="search" placeholder="검색어를 입력하세요" title="검색어 입력">
<button>
<i class="xi-search"></i>
</button>
</form>
</div>
</body>
html로 button을 추가하고 xi 폰트 아이콘을 불러온다.
그리고 css로 기존의 input의 border과 background를 보이지 않게 하고 form을 감싸고 있는 div에 원하는 색을 추가한다.
<style>
.search-wrap {
margin: 30px;
}
.search-wrap .search-form {
display: flex;
justify-content: center;
align-items: center;
height: 60px;
}
.search-wrap .search-form select {
border: none;
width: 100px;
height: 20px;
}
.search-wrap .search-form input[type=text] {
height: 20px;
width: 200px;
}
.search-wrap .search-form select:focus {
outline: none;
}
.search-wrap .search-form button {
margin-left: 5px;
color: white;
background: #000;
border: none;
}
.search-wrap .search-form button i {
display: flex;
font-size: 20px;
width: 20px;
height: 25px;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="search-wrap">
<form action="#" method="get" class="search-form">
<select>
<option>전체</option>
<option>제목</option>
<option>제목/본문</option>
</select>
<label for="search" class="hide">검색</label>
<input type="text" id="search" title="검색어 입력">
<button>
<i class="xi-search"></i>
</button>
</form>
</div>
</body>
위와 같은 방식으로 xi 아이콘을 불러오고 기존 input의 css를 제거한다.
*
.search-wrap .search-form input:focus {
outline: none;
}outline : none를 추가하면 input을 클릭했을 때 생기는 테두리를 제거할 수 있다.
