Removing gradients

HTML & CSS
1

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

select {
-moz-appearance:none;
-webkit-appearance:none;
background: black;
}

but although it did get rid of the gradient I also lost the arrows.

Is there a way of doing this with css?

2

Can you adapt any of this? Forked from @PaulOB

http://codepen.io/ryanreese09/pen/ByqQXy

1 Like
3

Fee free :smile:

That method is tried and tested and the one I am using these days for consistency.

4

That’s almost spot on thank you, is it possible the have an up arrow too?

5

Where?

6

You have a little heart to show your love :smile:
That’s our equivalent to likes. Because we’re very loving and caring around here :wink:

1 Like
7

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.

8

Thanks Monica, I’ll use that future :slight_smile:

9

Sorry I meant an up and down arrow all the time instead of just the down arrow

10

Monica? :stuck_out_tongue:

11

The arrow in the example above is created using :after and a mitred border.

.plain-select:after{
    content:"";
    position:absolute;
    z-index:2;
    right:8px;
    top:50%;
    margin-top:-3px;
    height:0;
    width:0;
    border-top:6px solid #f99300;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    pointer-events:none;
}

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 :slight_smile:

12

Sorry, that’s my autocorrect! Should know better than to rely on it :confused:

1 Like
13

Thanks thats perfect! :smiley:

14

I understand… Autocorrect is not my best friend precisely :smiley:

15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.