0

I have a view with few exposed filters. They are all "choose 1 term" type of filters with appearing dropdown list when you click on right side of them.

I want to style appearing dropdown lists. It looks ok in chrome, but it's especially ugly looking in IE. Also, i can't find them in the code, they just dissapear when i try to "inspect" them.

How can i customize those drop-down lists' appearances? Do they have any css classes? Any other ideas?

closed as off topic by Chapabu, Letharion, AjitS, Patrick Kenny, niksmac Feb 15 '13 at 4:21

Questions on Drupal Answers are expected to relate to Drupal within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here. If this question can be reworded to fit the rules in the help center, please edit the question.

  • 1
    If you can't find them in the code, cut and paste the code into a text editor and then search for the text of the labels/options. You have to make a basic effort yourself before asking other people for help. – Patrick Kenny Feb 14 '13 at 1:14
  • Also, this is just a CSS question. You are asking "Does this element have any classes? How can I style it"; so it actuall belongs on Stack Overflow. – Chapabu Feb 14 '13 at 9:31
1

Unfortunatelly, every browser has its own rendering of drop downs (as well as fileupload boxes). So direct CSS styling of a dropdown element won't work in all browsers.

What you need to do is to use module called Uniform (http://drupal.org/project/uniform). It provides intergration with uniform library which automatically replaces drop downs, fileuploads, checkboxes and radios with custom styled elements.

This will give you ability to style these custom elements and make dropdown lists look the way you want in almost any browser. Just check if this works for you.

0

try this css code and change it to your requirement

.form-select {
   background: transparent;   
   width:95px;
   padding: 4px;   
   border: 1px solid #d8d9da;   
   cursor:pointer;
   border-radius:4px;
    color: #8C8C8C;
    font: 13px "Times New Roman";
    font-style:italic;
     -webkit-transition-duration: 0.1s;
-moz-transition-duration: 0.1s; 
-o-transition-duration: 0.1s; 


}

.form-select:hover{

    background-color:#CC0;

}
  • This is a TERRIBLE idea. This would affect EVERY select box used on pages that use your theme. I'm definitely not saying use an id, because that it also bad, but you should target your classes more specifically. – Chapabu Feb 14 '13 at 9:33

Not the answer you're looking for? Browse other questions tagged or ask your own question.