[DAY - 24] input[type=text] 꾸미기 — 비 전공자의 Be developer

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을 클릭했을 때 생기는 테두리를 제거할 수 있다.

1) input 꾸미기

티스토리툴바