Javascript 如何使用页边空白顶部显示输入下的数据列表

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

我希望在包含和输入数据列表的搜索内容之间有一个空间，但我不知道为什么不能创建这个空间

有人能帮帮我吗

这是我的密码：

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

---

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

有些元素根本无法使用CSS设置样式。包括:所有 高级用户界面小部件，如范围、颜色或日期 控制；以及所有下拉小部件，包括

，

，

和

元素。文件选择器小部件也是 我们知道它根本就不会被钉死。新的和 元素也属于这一类

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

---

如果您需要更多选项，可以使用libs，如

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

JAVASCRIPT代码：

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

---

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

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

.search {
    height: 200px;
    position: absolute;
    z-index: 999;
    top: 0;
    right: 0px;

    &__content {
        top: 200px;
        left: 320px;
        width: 430px;
        height: 50px;
        background-color: #fff;
        border-radius: 34px;
        box-shadow: 0px 0px 12px rgba(0,0,0,0.3);

        input {
            width: 380px;
            height: 50px;
            background: transparent;
            border: 0;
            display: block;
            padding: 0px 32px 10px 10px;
            font-size: 14px;
            color: #000;
            border-radius: 34px;
            border: none;
            outline: none;
        }

        input::-webkit-calendar-picker-indicator {
            display: none;
        }

        .input-field input.placeholder {
            color: #ccc;
            font-size: 14px;
        }

        .inner-addon { 
            position: relative;
            top: 5px;
            left: 22px;
        }

        // .search-icon {
        //     // color: #576a8b;
        //     color: #000;
        //     font-size: 20px;
        // }

        // .search-icon:hover {
        //     cursor: pointer;
        //     color: gray;
        // }

        // .inner-addon i {
        //   position: absolute;
        // }

        // .left-addon i  { left:  0px;}
        // .left-addon input  { padding-left:  30px; }
    }
}