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

Question

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

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

有人能帮助我吗？？

这是我的代码：

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

这是我的CSS：

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

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

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

        }

        datalist {
            // why doesn't work?
            top: 50px;
            margin-top: 50px;
        }

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

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

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

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

        .inner-addon { 
            position: relative; 
            left: 10px;
        }

        .inner-addon i {
          position: absolute;
        }

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

Answer 1

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

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

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

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

如果需要更多选项，可以使用像react-select这样的库

Answer 2

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

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

CSS：

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