html - I want to know how to apply css on datalist items. I want to change height and font size -
i want know 1 thing have apply datalist in form. want increase items font-size , want css on padding.
<!doctype html> <html> <style> #banner .seach-main-con .text-box{width:100%; height:45px; border-radius:5px; margin:3px 0; background-color:#fff; font-size:15px;} #banner .seach-main-con option{padding:5px; font-size:15px;} #banner .seach-main-con .search-btn{width:100%; height:50px; border-radius:5px; margin:15px 0; background-color:#d83318; color:#fff; font-size:20px; border:0;} #banner .seach-main-con .dropdown-text{width:100%; height:45px; border-radius:5px; margin:3px 0; background-color:#fff; font-size:15px;} #banner .seach-main-con datalist{padding:5px; font-size:15px;} #banner .seach-main-con .datalist-option{width:100%; padding:5px; font-size:15px; background-color:#fff;} </style> <body> <form> <h3>keyword search form here</h3> <div class="height"></div> <input list="browsers" name="browser" class="text-box"> <datalist id="browsers"> <option value="delhi"> <option value="haridawar"> <option value="shirdi"> <option value="bombay"> <option value="france"> </datalist> </form> <p><strong>note:</strong> datalist tag not supported in internet explorer 9 , earlier versions, or in safari.</p> </body> </html>
like select elements, datalist element has little flexibility in styling. cannot style of suggested terms if that's question asking.
browsers define own styles these elements.
Comments
Post a Comment