如何在图标后的输入字段中输入 position cursor

Question

我有一个输入字段，其中使用背景属性定位了一个搜索图标，每次我输入它时，cursor 都会粘在开头，如图所示：

https://imgur.com/ocJRux8

我怎样才能在 position cursor 后搜索图标？ 我尝试设置padding-left和text-indent但这也会移动占位符，这是不可取的。

这是我的输入字段：

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;

这是我的 CSS：

.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;
    // text-indent: 30px;
} 

.search-icon {
  height: 20px;
  width: 20px;
}

.no-results-found {
 text-align: center;
 margin-top: 50px;
}

.search-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    padding-left:35px;
}

input:focus{
  outline: none;
}

  ::-moz-placeholder { /* Firefox 19+ */
    padding-left:20px;
}
  :-ms-input-placeholder { /* IE 10+ */
    padding-left:20px;
}
  :-moz-placeholder { /* Firefox 18- */
    padding-left:20px;
}

Answer 1

为搜索输入添加一些padding ，因为它会填充那么多区域。

.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;
} 

Answer 2

这就是我将如何做到的。

具有 2 个变体的示例

 const { useState, useEffect } = React; const App = () => { return <div> <div className="container"> <span className="icon"> <i className="fas fa-search"></i> </span> <input className="input" type="Text" placeholder="Search"/> </div> <div className="container1"> <span className="icon1"> <i className="fas fa-search"></i> </span> <input className="input1" type="Text" placeholder="Search"/> </div> </div> } ReactDOM.render( <App />, document.getElementById('root') );

 .container { border: 1px solid black; width: 300px; }.input { padding: .5rem.5rem.5rem 2rem; border: none; }.input:focus { outline: none; }.icon { position: absolute; margin-top: .5rem; margin-left: .5rem; }.container1 { margin-top: 1rem; border: 1px solid black; width: 300px; display: flex; }.icon1 { padding: .5rem 0.5rem.5rem; }.input1 { flex: 1 1 auto; padding: .5rem; border: none; }.input1:focus { outline: none; }

 <script src="https://unpkg.com/react/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js"></script> <div id="root"></div>