如何在輸入下以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; }
    }
}