All geek questions in one place

Combine input and select into one visible input field

I am new to styling html elements (e.g. input and selection in this case) and I am looking to implement a visually combined input / selection element. In fact, input and selection will still be completely separated as form elements, but based on the class and CSS, I would like to insert the contents of the selection menu into the right side of the input field. Sorry, I'm not a photoshop, so here is an idea of ​​how this might look:

------------------------------------------------ | Select text [v] | ------------------------------------------------

As you can see, the left side of the input is where you enter the line for the input element, and the drop-down list is in the frame of the input element (it is assumed that [v] is down to delete the list). Any references to how to look in style resemble something like this or suggestions are welcome.

+6
source share
5 answers

The following example is very simple. This shows the main thing you would like to do: since the form elements can be in CSS style, like everything else, it's pretty simple. In this example, there are still some design issues with browsers without firefox, I will improve it a bit.

 <html> <head> <style> select#selectoption { border-left:none; padding:none; } input#datahere { position:relative; border-right:none; padding:none; } </style> </head> <body> The form below is a simple example. <form name ="explanation"action="test" method="post"> <input type="text" id="datahere" /> <select id="selectoption" /><option>test</option><option>test2</option></select> </form> </body> </html>

EDIT: An online example of what you want can be seen here: http://jsfiddle.net/xFQMf/3/

+7
source

Something like this should do what you want.

http://jsfiddle.net/rhoenig/xFQMf/

+2
source

6 years later: a data item can help.

https://developer.mozilla.org/nl/docs/Web/HTML/Element/datalist

(Safari does not yet support this)

+2
source

There is a library you can try: https://github.com/eredacokmerke/dm-i

0
source

Source: https://habr.com/ru/post/902595/

More articles:


All Articles