Question

首先，感谢您阅读我的问题，并尝试帮助我并为我的英语道歉。

我想在包含和包含数据列表的搜索内容之间留一个空格，但是我不知道为什么不能创建该空格。

请问有人可以帮我吗？

这是我的代码：

a.used < Count(b.id)

这是我的CSS：

render() {
    const { value } = this.state;
    return (
        <div className="search search__content">
            <div className="inner-addon left-addon">
                <i className="icon-search search-icon"></i>
                <input onChange={this.handleSearch} type="text" placeholder="Search..." value={value} list="list_languages" autoComplete="on" />
                <datalist id="list_languages">
                    <option>HTML</option>
                    <option>CSS</option>
                    <option>JavaScript</option>
                    <option>Java</option>
                    <option>Ruby</option>
                    <option>PHP</option>
                    <option>Go</option>
                    <option>Erlang</option>
                    <option>Python</option>
                    <option>C</option>
                    <option>C#</option>
                    <option>C++</option>
                    <option>HTML</option>
                </datalist>
            </div>
        </div>
    );
}

Answer 1

datalist元素在样式上几乎没有灵活性。您不能像选择元素一样为数据列表设置样式。

https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms#The_ugly

有些元素根本无法使用CSS设置样式。这些包括：全部高级用户界面小部件，例如范围，颜色或日期控制；以及所有下拉小部件，包括<select>，<option>， <optgroup>和<datalist>元素。文件选择器小部件也众所周知根本没有样式。新和元素也属于此类别。

浏览器为这些元素定义自己的样式。

如果需要更多选项，可以使用react-select之类的库

Answer 2

非常感谢！！最后，我使用填充将文本向上移动，但将输入向下移动，并在文本和选项之间留出一些空间。

JAVASCRIPT代码：

SELECT ACNT_CODE
FROM DB
WHERE DB.ACNT_CODE LIKE '[B-Z]%'
OR    DB.ACNT_CODE LIKE '[0-9]%'
OR    DB.ACNT_CODE LIKE 'A[A-Y]%'
OR    DB.ACNT_CODE LIKE 'A0%''
OR    DB.ACNT_CODE LIKE 'A10%''
OR    DB.ACNT_CODE LIKE 'A1[2-9]%'
OR    DB.ACNT_CODE LIKE 'A110%''
OR    DB.ACNT_CODE LIKE 'A111[2-9]%'
OR    DB.ACNT_CODE LIKE 'A1110%''
OR    DB.ACNT_CODE LIKE 'A1111[2-9]%'
OR    DB.ACNT_CODE LIKE 'A11110%''
OR    DB.ACNT_CODE LIKE 'A11111[2-9]%'

CSS：

render() {
    const { value, options } = this.state;
    return (
        <div className="search search__content">
            <div className="inner-addon left-addon">
                <input onChange={this.handleSearch} onKeyDown={this.handlePressEnter} type="text" placeholder={PLACEHOLDER} value={value} list="list_languages" autoComplete="on" />
                <div className="datalist">
                    <datalist id="list_languages">
                        { options && options.length > 0 && options.map( (option, index) => {
                            return (
                                <option value={option.nombre} key={index} />
                            );
                        })}
                    </datalist>
                </div>
            </div>
        </div>
    );
}

如何在输入下以margin top显示数据列表

2 个答案: