Can this down-arrow be removed or styled?

[ChrisjChrisj]

I’m working on a Form with drop-down menus:

<form method="get" action="../search.php">
<input id="keyword" name="keyword" value="SEARCH WORDS" onfocus="if (this.value=='SEARCH WORDS') {this.value=''; this.style.color='#000000';}" onclick="clickclear(this, 'Enter Search Words')" onblur="clickrecall(this,'Enter Search Words')" value="" />
<select size="1" name="channel" class="dropdown1">
<option value="">SELECT</option>
<option value="All">ALL</option>
<option value="1">Channel1</option>
<option value="2">Channel2</option>
</select>
<select size="1" name="sub_category" class="dropdown1">
<option value="All">OPTIONAL</option>
</select>
<input type="submit" value="VIEW">
</form>

.dropdown1
{
width:290px;
height: 70px;
vertical-align:top;
padding: 10px 30px 0px 70px;
font-size: 27px;
margin: 0px auto;
font-family: arial, helvetica, sans-serif;
}

But, to the right of “SELECT” and “OPTIONAL” is a down-arrow (see attached image).

Can you tell me how I can remove it or style it?
Any help is appreciated.

[ralphm]

That’s a browser default, and each browser has its own style, so it’s not something you can easily change. There are some heavy-handed JS solutions, but not worth the hassle imho. I figure if it works, move on to something more important, but that’s just me …

[Ray.H]

@ChrisjChrisj

Can you tell me how I can remove it or style it?

That request does seem doable with the vendor prefix appearance property.
Lengthy discussion here at css-tricks

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid; /*for moz ff*/
}

select::-ms-expand {
    display: none;
}

[PaulOB]

Hi,

I commonly use this approach to standardise the select element and provide my own drop down arrow.

No js needed and works in modern browsers.

You can easily remove the arrow from the demo but I think that would hurt usability.