Jam's story
[CSS] 검색창 만들기( 이미지 넣기, 크기늘리기) 본문
같은 속성을 적용하면 , 맨마지막에 쓰인 속성값이 적용된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
input[type='text']{
width: 100%;
padding:12px 20px;
margin:8px 0;
box-sizing:border-box;
border:2px solid #ccc;
border-radius: 4px;
background-color: white;
background-image: url("../images/searchicon.png");
background-repeat: no-repeat;
background-position: 10px center;
/* search글자와 돋보기 사진안겹치게 */
padding-left:40px;
/* 위에도 width가 잇으면 밑에 잇는 속성으로 적용된다. */
width:150px;
/* width을 안쓰면 모든속성이라는 뜻 */
transition:width 0.5s ease;
}
input[type='text']:focus{
width:80%;
}
</style>
</head>
<body>
<form action=""method="get">
<input type="text"name="search"placeholder="Search...">
</form>
</body>
</html>
'WEB > CSS' 카테고리의 다른 글
| [CSS] 아이콘에 스타일+ 막대그래프 +사원 이미지 (0) | 2022.05.25 |
|---|---|
| [CSS] 특수성(특이성) (0) | 2022.05.25 |
| [CSS]속성선택자 (0) | 2022.05.25 |
| [CSS] 이미지 스프라이트 - 아이콘 (0) | 2022.05.25 |
| [CSS] 반응형 웹+ 이미지 갤러리 (0) | 2022.05.25 |
'WEB/CSS' Related Articles
more
Comments