Javascript 如何在图标后的输入字段中定位光标

我有一个输入字段，其中有一个使用background属性定位的搜索图标，每次我输入时，光标都会停留在开头，如图所示：

如何将光标定位在搜索图标之后？我尝试设置

左填充

和

文本缩进

，但这也会移动占位符，这是不可取的

这是我的输入字段：

import React, { Component } from "react";
import Spinner from '../../components/Spinner/Spinner.jsx';
import { Link } from 'react-router-dom';

import axios from "axios";

class Search extends Component {

    state = {
        searchResults: [],
        isLoading: false
    }

    getSearchQuery = (event) => {
        const SEARCH_RESULTS_ENDPOINT = process.env.REACT_APP_SEARCH_ENDPOINT;

        const queryString = document.querySelector(
            ".search-input"
        ).value;
        if (event.keyCode === 13) {
            this.setState({ ...this.state, isLoading: true });
            axios.post(SEARCH_RESULTS_ENDPOINT, {
                queryString: queryString,

            }).then(response => {
                this.setState({ ...this.state, searchResults: response.data });
                this.setState({ ...this.state, isLoading: false });
            });
        }
    };

    render() {
        if (this.state.isLoading) {
            return <Spinner />
        }
        return (

            <div>
                <input
                    type="text"
                    placeholder="Search"
                    className="search-input"
                    onKeyDown={(e) => this.getSearchQuery(e)}

                />
                <div>
                    {this.state.searchResults.map(result => (
                        <div key={result._id} >
                            <img src={result.picture} alt="avatar" />
                            <div >
                                <div>
                                    <h2>{result.title}</h2>
                                    <p>{result.date}</p>
                                    <p>{result.postContent}</p>
                                    <Link to={`/post/${result._id}`} className="read-more-btn">
                                        <button className="read-more-btn">Read more</button>
                                    </Link>
                                </div>
                            </div>
                        </div>
                    ))}

                </div>
            </div>
        );
    }
}

export default Search;

---

添加一些

填充

来搜索输入，因为它会填充那么多区域

.search-input {
    background: url(../../assets/images/search-icon.png) no-repeat scroll 12px 12px;
    background-size: 20px 20px;
    margin: auto;
    display: block;
    width: 500px;
    margin-top: 30px;
    height: 40px;
    border: solid 1px #AAAAAA;
    padding-left: 20px;
} 

---

我会这样做的

带有两个变体的示例

const{useState，useffect}=React；
常量应用=（）=>{
返回
}
ReactDOM.render(
,
document.getElementById（'root'））
);
.container{
边框：1px纯黑；
宽度：300px；
}
.输入{
填充：.5rem.5rem.5rem.2rem；
边界：无；
}
.输入：焦点{
大纲：无；
}
.图标{
位置：绝对位置；
边缘顶部：.5rem；
左边缘：.5rem；
}
.集装箱1{
页边顶部：1rem；
边框：1px纯黑；
宽度：300px；
显示器：flex；
}
.icon1{
填充：.5rem 0.5rem.5rem；
}
.输入1{
flex:1自动；
填充：.5rem；
边界：无；
}
.input1：焦点{
大纲：无；
}


.search-input {
    background: url(../../assets/images/search-icon.png) no-repeat scroll 12px 12px;
    background-size: 20px 20px;
    margin: auto;
    display: block;
    width: 500px;
    margin-top: 30px;
    height: 40px;
    border: solid 1px #AAAAAA;
    padding-left: 20px;
}