Menu
<label> Enter your favorite movies:<br/>
<input type="text" name="movies" list="movies"/>
<datalist id="movies">
<label> or select one from the list:
<select name="movies">
<option value="Star Wars">
<option value="The Godfather">
<option value="Goodfellas">
</select>
</label>
</datalist>
</label>
I have this thing, but the only problem is that I want a dropdown button merged with the input field that shows the dropdown list when we click on it. The html above is perfect for what I want to do, but there's only the button missing. Is it something possible to do without javascript?
476
To make clicking on the arrow open the dropdown, just add "pointer-events: none;" to the before class.
This is accomplished by increasing the select's width by the width of your new arrows, and adding the same amount to the parent p 's right padding. One way to change the select's width is by using calc(100% + 30px) .
Check this, this will add a pseudo element in the div of input tag, for better view change the content of element to font-awesome font of down arrow.
<div class="dropdown">
<input type="text">
</div>
And use below CSS :
.dropdown {
position: relative;
display: inline-block;
}
.dropdown::before {
position: absolute;
content: " \2193";
top: 0px;
right: -8px;
height: 20px;
width: 20px;
}
Check fiddle : Check Fiddle
172
You can try to use dropdown with bootstrap instead such as
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dropdowns</h2>
<p>The .dropdown class is used to indicate a dropdown menu.</p>
<p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
<p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
</div>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
