DropDown Arrows

[Tylor Eddy]

G'day Guys,

I'm having a bit of trouble trying to style the dropdown arrows in my new form, i wanted to ask for some support from some of your guys who have managed to work this out.

Here is my new form, with the ugly arrows

Any support would be greatly appreciated because they are persistant little buggers and wont change to my custom image

Regards

Tylor

[freshJet]

AFAIK you cannot move the arrows without moving the form dropdown thingy. I'd suggest using some CSS to position the dropdown so that it is centered both vertically and horizontally

[Tylor Eddy]

Thanks for the reply itrobb,

I've been fiddling around with this, but it just wont co-operate: http://bavotasan.com...using-only-css/

What i cant get it to do is display the image, and also i cant get the field to stay my current rounded style, it wants to go square.

Tylor

EDIT: I've actually managed to remove it so there is no arrow at all, it looks ok so i may just stick with that

Thanks for your support mate, greatly appreciated.

[freshJet]

If you want it rounded use border-radius however IIIRC this doesn't work in IE6. The again, nothing does. And for the images - have you definitely got the correct URL?

This should work:

<style>

.styled-select select {
  background: transparent;
  width: 268px;
  padding: 5px;
  font-size: 16px;
  border: 1px solid #ccc;
  height: 34px;
}

.styled-select {
  width: 240px;
  height: 34px;
  overflow: hidden;
  background: url([url="http://cdn.bavotasan.com/wp-content/uploads/2011/05/down_arrow_select.jpg"]http://cdn.bavotasan...rrow_select.jpg[/url]) no-repeat right #ddd;
}
</style>

<form>

<div class="styled-select">
<select>
[php for the options]
</select>
</div>

</form>

It's a good idea to save the image to your own directory instead.

[Tylor Eddy]

Thanks mate,

I was missing this which is why it wouldnt display correctly

-webkit-appearance: none;

Tylor