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

Question

First of all, give thanks for reading my question and try to help me and apologize for my English.

I would like to have a space between search content that contains and input with datalist, but I don't know why I can't create that space.

Can someone help me, please??

Here is my code:

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

And here is my 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

the datalist element has very little flexibility in styling. You cannot style datalist just like select elements.

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

Some elements simply can't be styled using CSS. These include: all advanced user interface widgets, such as range, color, or date controls; and all the dropdown widgets, including <select> , <option> , <optgroup> and <datalist> elements. The file picker widget is also known not to be stylable at all. The new and elements also fall in this category.

Browsers define their own styles for these elements.

if you need more options you can use libs like react-select

Answer 2

Thanks a lot!! Finally I use padding to move text up but move input down and leave a little space between text and options.

JAVASCRIPT CODE:

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