html - 带有图标 : keep input element at a size of its container and icon on same line 的样式搜索输入

Question

我正在尝试构建一个边上带有图标的搜索输入。我正在使用 ReactJs。

这是我的组件:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Icon } from 'react-fa';

import '../index.css';

class SearchInput extends Component {

    static propTypes = { 
      placeholder: PropTypes.string
    };


    render() {

            return (
                <div className='ux-search-input-container'>
                    <input className='ux-search-input' type='text' placeholder={this.props.placeholder} />
                    <Icon className='ux-search-input-icon' name='search' />
                </div>
                );
    }
};

export default SearchInput;

及其样式:

.ux-search-input-container {
    color: $ux-color-text;
    text-align: left;
    vertical-align: middle;
    padding: 2px;
    border: solid;
    border-color: $ux-color-border;
    border-width: 1px;
    border-radius: 4px;
}

.ux-search-input {
    width: 70%;
    padding: 5px 10px 5px 10px; // top right bottom left
    border: none;
    border-width: 0px;
}

.ux-search-input-icon {
    text-align: right;
    width: 30%;
}

.ux-search-input:focus {
    outline: none;
    box-shadow: 0px 0px 2px $ux-color-light-blue;
    background-color: $ux-color-hover;
}

搜索图标移动到下一行，如:

无论容器有多小，我都需要将搜索图标保持在输入框的大小。如果容器缩小或放大，输入框应跟随尺寸并保持搜索图标在其合适的尺寸。

Answer 1

方法一

将 display: flex 添加到 CSS 中的 ux-search-input-container 类。

然后添加填充使其居中。

方法二

将position: relative 添加到ux-search-input-container 类，然后添加position: absolute;右:10px；顶部:5px 到 ux-search-input-icon 类。

工作 Codepen使用第二种方法。