Menu
I am new to styling html elements (e.g. input & select in this case), and I am looking to implement a visually combined input / select element. In essence the input and select would still be completely separate as form elements, but based on class and css I would like to inset the contents of the select menu into the right hand side of the input field. Sorry I am no photoshoper, so here is a representation of what it might look like:
------------------------------------------------
| Select text [v] |
------------------------------------------------
As you can see the left hand portion of the input is where you would type the string for the input element, and the select drop down is inset into the border of the input element (the [v] is supposed to be a down arrow button to drop the list). Any links to how to get stared styling something like this or suggestions are welcome.
297
The following example is very simple. It shows the main thing you would want to do: Since form elements are able to be styled with CSS just as everything else, it is pretty straightforward. This example still has some styling issues with non-firefox browsers, I will improve it a little.
<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/
200
The datalist element might help (Safari doesn't support this, yet).
35
<input type="text" name="city" list="cityname">
<datalist id="cityname">
<option value="Blida">
<option value="OuledSlama">
</datalist>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
