我正在尝试创建一个搜索框，搜索框中带有<i class="fa fa-search">图标[重复]

Answer 1

我注意到您的搜索图标被放置在搜索输入字段之外的问题。这段代码在我这边工作是这样的 [在此输入图片描述]1

   **HTML File**
         <form role="search" method="get" class="header-search-form">
                <label>
                    <div class="search-input-container">
                        <input type="search" class="search-field" placeholder="Search" name="s" title="Search for:" />
                        <i class="fa fa-search search-icon"></i>
                    </div>
                </label>
            </form>




**CSS File**
     .header-search-form {
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 0 auto;
                padding: 5px;
            }
    
            .search-input-container {
                position: relative;
                width: 100%;
            }
    
            .search-field {
                width: 100%;
                padding: 10px 15px;
                padding-right: 40px;
                border: 2px solid #bf2137;
                border-radius: 20px;
                color: #bf2137;
                font-size: 16px;
            }
    
            .search-field::placeholder {
                color: #bf2137;
            }
    
            .search-icon {
                position: absolute;
                right: 25px;
                top: 50%;
                transform: translateY(-50%);
                color: #bf2137;
                font-size: 16px;
            }
    
            .header-search-form input[type="submit"] {
                display: none;
            }

希望这对您有用，谢谢