5

I want to know one thing that I have apply datalist in my form. But I want to increase their items font-size and want to css on it like 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> The datalist tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>

</body>
</html>
Evaldas Buinauskas
  • 13,739
  • 11
  • 55
  • 107
Rupesh Arora
  • 557
  • 2
  • 9
  • 26

1 Answers1

5

Like select elements, the datalist element has very little flexibility in styling. You cannot style any of the suggested terms if that's what your question was asking.

Browsers define their own styles for these elements.

Stefan van de Laarschot
  • 2,154
  • 6
  • 30
  • 50