Menu
I am looking for a pure HTML / CSS solution. Everything I have found so far involves plugins (jquery usually).
I want to be able to style the "autocomplete suggestions dropdown box" (I don't know what it is really called so I tried to describe it).
For example I have
CSS
input[type=search] {
background: none;
font-weight: bold;
border-color: #2e2e2e;
border-style: solid;
border-width: 2px 2px 2px 2px;
outline: none;
padding:10px 20px 10px 20px;
width: 250px;
}
The "autocomplete dropdown box" is the traditional simple white box with it's own default font. I don't know what to target in my CSS to update this.
HTML
<div id="search">
<form method="GET" action="events">
<div id="search_field_container">
<input name="city" id="search_input" type="search" placeholder="City, ST">
</div>
<input type="submit" value="Find">
</form>
</div>
228
Press Alt + Q keys simultaneously to close the Microsoft Visual Basic Applications window. From now on, when click on a drop down list cell, the drop down list will prompt automatically. You can start to type in the letter to make the corresponding item complete automatically in selected cell.
Approach: Create a div with the class as a container. Inside of this div, create another div with a class as a text-container that will contain the <input> tag & <datalist> tag. Declare the list attribute as programmingLanguages inside the <input> tag.
The autocomplete attribute specifies whether a form or an input field should have autocomplete on or off. Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.
Apparently the autocomplete dropdown box cannot be edited with CSS and is not part of the DOM. I found this information from the following (duplicate) questions.
How to style the browser's autocomplete dropdown box?
Styling autocomplete dropdowns in browsers
78
However I am not sure which auto complete control you are using .
Sample Working Demo
If you are using Jquery AutoComplete then you can target using the below css
/*Css to target the dropdownbox*/
ul.ui-autocomplete {
color: red !important;
-moz-border-radius: 15px;
border-radius: 15px;
}
Above css will change the font color to Red and then make the corner to be rounded for dropdownoptions.
Complete Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style>
input[type=search] {
background: none;
font-weight: bold;
border-color: #2e2e2e;
border-style: solid;
border-width: 2px 2px 2px 2px;
outline: none;
padding: 10px 20px 10px 20px;
width: 250px;
}
/*Css to target the dropdownbox*/
ul.ui-autocomplete {
color: red !important;
-moz-border-radius: 15px;
border-radius: 15px;
}
</style>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$("#search_input").autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="ui-widget">
<input name="city" id="search_input" type="search" placeholder="City, ST">
</div>
</form>
</body>
</html>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
