Customizing FORMFIELDS / DROPDOWNS using CSS

programming web dev
1

Hi guys, I’m just starting to learn advance css coding and was playing around on how to customize a formfield. I was successful with the SEARCH BAR but is having problems with the DROPDOWN OPTION. I attached a screenshot on how the file looked like on IE vs FIREFOX, and another file that I wish to achieve the looks from.

I can not seem to find any tutorial here (Kirupa’s) and even is unlucky with google lately. Can someone please point me somewhere?

thank you

HTML File:

<html>
<head>

<title>CSS Custom Text Field</title>

<link href="style.css" type="text/css" rel="stylesheet" />

</head>


<form>
<div class="fieldHolder">
<input type="text" name="field" class="textInput2" />
</div>
</form>

<br><br>
<div class="fieldHolder">
<select name="select" class="textInputSelectOption">
  <option value="www.asdfsa.com">------- please select imprint -------</option>
  <option value="www.nokia.com">Nokia</option>
  <option value="www.google.com">Google</option>
  <option value="www.netscape.com">Netscape</option>
</select>
</div>

</body>
</html>

CSS File:

<html>
<head>

<title>CSS Custom Text Field</title>

<link href="style.css" type="text/css" rel="stylesheet" />

</head>


<form>
<div class="fieldHolder">
<input type="text" name="field" class="textInput2" />
</div>
</form>

<br><br>
<div class="fieldHolder">
<select name="select" class="textInputSelectOption">
  <option value="www.asdfsa.com">------- please select imprint -------</option>
  <option value="www.nokia.com">Nokia</option>
  <option value="www.google.com">Google</option>
  <option value="www.netscape.com">Netscape</option>
</select>
</div>

</body>
</html>