0

I am working with jsf and I am using the h:selectOneMenu tag. Currently on the Website it is getting displayed like this : selectOneMenu

But i would like to change the apperieance of the arrow at the end. It should have a red color and no background. I have tried a lot of things like using the overflow attribute or changing the background of the select item to the dropdown arrow i would like to have. Changing the Color of the element also effects the writing in it. For some reason putting the selectOneMenu into a div and adding folowing styles to it works fine:

   .epSelect {
width: 240px;
overflow: hidden;
background: url(..arrowdown_red.png) no-repeat right #FAFAFA;
border: 1px solid #CDCDCD;
color: #333333;
height: 27px; }

.epSelect select {
    background: transparent;
    width: 257px;
    height: 27px;
    padding-top: 5px;
    font-size: 12px;
    border: 0;
    border-radius: 0;
    -webkit-appearance: none;
    padding-left: 3%;
    cursor: pointer;    
}

"epSelect" ofcause beeing added as class to the div

Does anyone knonw the specific css element which can be addressed to change the color of the arrow only ?

in the standard html select tag it would be addressed by the label:after attribute as can be seen here : http://cssdeck.com/labs/styling-select-box-with-css3

Any help is much appreciated.

alf neufert
  • 3
  • 1

1 Answers1

1

Simply put JSF is in this part merely an html generator in which it generates a plain html select/dropdown. Effectively your question is 'How do I change the icon of an html select'.

So look at the following Stackoverflow Q/A for answers

Kukeltje
  • 12,223
  • 4
  • 24
  • 47
  • Thanks and sorry for posting smth that is allready answerd, sometimes it's just about searching for the correct thing... – alf neufert Jan 23 '19 at 08:03
  • Great it works. No problem... yes it sometimes is, but often (in my opinion) it also about knowing (and wanting to know) some of the underlying technology – Kukeltje Jan 23 '19 at 08:28