JS Add input function to select drop-down box

JavaScript uses the ParentNode.nextSibling.value implementation of this feature, you will actually find that there are two control elements on the page, one is select, one is input, use CSS to overwrite the input on the Select, and then use JS to assign the value of the drop-down box to the Input, is actually using input to simulate the function of select, the idea is very novel, do not know how many people need select can enter the text function, the following is the detailed implementation code: Front-End resource sharing

. Code

2. <div style="position:relative;" >
4. <span style="Margin-left:100px;width:18px;overflow:hidden;" >
6. <select style="width:118px;margin-left:-100px" onchange= "this.parentnode.nextsibling.value= This.value ">
8. <option value="Sky blue"> Sky blue </option>
10. <option value="Grass green"> Grass Green </option>
12. <option value="water clearing"> Water clearing </option>
14. </select></span><input name="box" style="width:100px;position:absolute;left:0px;" >

In this example, the CSS implements the positioning of the input box, and the JS implementation displays the value of the select selected by the user in input.