I’ve got a select box (basic form element) but I want to loose the gradient to it but keep the arrows. I’ve made it black but that really shows the gradient. I tried
but although it did get rid of the gradient I also lost the arrows.
Is there a way of doing this with css?
That method is tried and tested and the one I am using these days for consistency.
That’s almost spot on thank you, is it possible the have an up arrow too?
You have a little heart to show your love
That’s our equivalent to likes. Because we’re very loving and caring around here
If you mean you want the select down arrow to change to an up arrow when clicked then you would need some js to do that.
The standard select doesn’t behave like that anyway so there is no loss of functionality.
Thanks Monica, I’ll use that future
Sorry I meant an up and down arrow all the time instead of just the down arrow
The arrow in the example above is created using :after and a mitred border.
border-top:6px solid #f99300;
border-left:6px solid transparent;
border-right:6px solid transparent;
If you want another arrow you could use the :before pseudo element in the same way as above and position another arrow above or below as required. The code will be much the same as above but using :before instead of :after and then using different border widths and a slight change in the positioning to accommodate both arrows…
You can see how the
arrows are created here.
I’ll leave that as an exercise for you to work out as all the details are there
Sorry, that’s my autocorrect! Should know better than to rely on it
I understand… Autocorrect is not my best friend precisely
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.