Nic727 Posted November 17, 2014 Share Posted November 17, 2014 Hi, I'm creating a data list for my contact form and I have a problem. I hate too much option to fit on screen and I would like to have a small number of option and a scrollbar on the side. My HTML5 <input type="text" list="countries" name="mycountry" /> <datalist id="countries"> <option value="Afghanistan">Afghanistan</option> <option value="Afrique du Sud">Afrique du Sud</option> <option value="Albanie">Albanie</option> <option value="Algérie">Algérie</option> <option value="Allemagne">Allemagne</option> <option value="Andorre">Andorre</option> <option value="Angola">Angola</option> <option value="Antigua et Barbuda">Antigua et Barbuda</option> <option value="Arabie saoudite">Arabie saoudite</option> <option value="Argentine">Argentine</option> <option value="Arménie">Arménie</option> <option value="Australie">Australie</option> <option value="Autriche">Autriche</option> <option value="Azerbaïdjan">Azerbaïdjan</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> </datalist> I know that you can use <select> tag and put a size in it, but I'm searching on the web if it's possible with a datalist and I find nothing. Link to comment Share on other sites More sharing options...
Ingolme Posted November 17, 2014 Share Posted November 17, 2014 It seems that the datalist provides possible values for text inputs. Text inputs only take one value. Link to comment Share on other sites More sharing options...
Nic727 Posted November 17, 2014 Author Share Posted November 17, 2014 That's what I have for my datalist. On Chrome, I can search for the option I want without writing a letter, so I have something weird. Too much options!!! http://image.noelshack.com/fichiers/2014/47/1416257880-sans-titre.png Link to comment Share on other sites More sharing options...
dustcomposer Posted November 17, 2014 Share Posted November 17, 2014 (edited) Select option with css will work. <select name="mycountry"> <option value="Afghanistan">Afghanistan</option> <option value="Afrique du Sud">Afrique du Sud</option> <option value="Albanie">Albanie</option> <option value="Algérie">Algérie</option> <option value="Allemagne">Allemagne</option> <option value="Andorre">Andorre</option> <option value="Angola">Angola</option> <option value="Antigua et Barbuda">Antigua et Barbuda</option> <option value="Arabie saoudite">Arabie saoudite</option> <option value="Argentine">Argentine</option> <option value="Arménie">Arménie</option> <option value="Australie">Australie</option> <option value="Autriche">Autriche</option> <option value="Azerbaïdjan">Azerbaïdjan</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option></select> CSS select option { height: 50px; background-color: lavender;} Or simply size the select input: <select size='5' name="mycountry"> <option value="Afghanistan">Afghanistan</option> <option value="Afrique du Sud">Afrique du Sud</option> <option value="Albanie">Albanie</option> <option value="Algérie">Algérie</option> <option value="Allemagne">Allemagne</option> <option value="Andorre">Andorre</option> <option value="Angola">Angola</option> <option value="Antigua et Barbuda">Antigua et Barbuda</option> <option value="Arabie saoudite">Arabie saoudite</option> <option value="Argentine">Argentine</option> <option value="Arménie">Arménie</option> <option value="Australie">Australie</option> <option value="Autriche">Autriche</option> <option value="Azerbaïdjan">Azerbaïdjan</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option> <option value="Hors Canada">Hors Canada</option></select> Edited November 17, 2014 by dustcomposer Link to comment Share on other sites More sharing options...
Nic727 Posted November 17, 2014 Author Share Posted November 17, 2014 (edited) Thank youEDIT:I know that with <select> you can make stuffs appearing like you want, but with <datalist>, I'm looking into a better dynamic search option when you write and you have to options matching the letter. All work fine, but when you click to write, you have the full list, but I would like to have only the top 5 option and a scroll bar and be able to write what you are looking for at the same time. I tried with IE11 and Chrome; With Chrome, you don't have a scroll bar, but with IE11, but you have about 11 options listed. Whatever, I found that : http://harvesthq.github.io/chosen But it could be nice if someone who are working to develop HTML5 to be able to add CSS styles and more option to <datalist>, because it's a great dynamic tag, but we can't do what we want. Thank you Edited November 18, 2014 by Nic727 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now