Блог

Главная - Вопросы по программированию - Как я могу настроить значок поля поиска в соответствии с вводом в поле поиска?

Как я могу настроить значок поля поиска в соответствии с вводом в поле поиска?

#css #flexbox #search-box

Вопрос:

я попробовал «дисплей:гибкий» и «гибкий:1», но, похоже, это не так work…is есть что-то неправильное или отсутствующее в моем css? кто-нибудь знает, пожалуйста, помогите мне! Большое вам спасибо! Это мой html:

 div className = "header-search" >
        <
        input type = "text"
        className = "header-searchInput" / >
        <
        SearchIcon className = "header-SearchIcon" / >
        <
        /div>

Это мой css:

 .header-search {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
}

.header-SearchIcon {
    background-color: orange;
    padding: 5px;
}

Вот как это выглядит с моими кодами:
введите описание изображения здесь

Комментарии:

1. Как выровнять? Как это должно выглядеть? Я предполагаю, что проблема в том, align-items: center;

Ответ №1:

Я не только решил вашу проблему, но и попытался сделать ее немного лучше.

 .header-search {
    display: flex;
    flex: 1;
    justify-content: center;
    border-radius: 24px;
}

.header-search input{
   outline: none !important;
    border:1px solid orange;
}
.header-search input:focus{
   outline: none !important;
    border:1px solid orange;
    box-shadow: 0 0 10px #719ECE;
}
.header-SearchIcon {
height:100%;
    background-color: orange;
    padding: 5px;
    cursor:pointer;
} 
 <div class="header-search" >
        <input type = "text"
        class="header-searchInput" / >
       <span class='header-SearchIcon'>search</span>
        </div>
Метки: