CODEWITHSUNDEEP
csswordpress
Andrew Truckle
Andrew Truckle

Reputation: 19117

Unable to see the drop-down arrow on a select field in a form on WordPress

I got an issue with CSS styling that I have struggled with for two days and can't work out.

Please have a look at this Registration page for my site. Towards the bottom you will see a security question (which is actually in a drop-down list):

Question

The HTML for that snippet is here:

<select name="seq_ques[]" class="input" style="font-size:14px; height:35px;">
    <option value="16">What is the scripture citation on title page of the song book?</option> 
</select>

As you can see, the drop-down arrow is not visible. I can do this in the browser and I can see the arrow:

CSS

So, I have tried to add that styling via the Custom Code section of my Wordpress website:

select[name="seq_ques[]"] {
    background: none;
}

I don't know how to switch off that setting. If I put a colour value in then the whole select box fills with colour. So I am confused.

Upvotes: 0

Views: 1818

Answers (1)

Filipe
Filipe

Reputation: 106

To achieve what you want, you can:

A - Correct/delete the css that is causing the issue

This, that is on line 50 of wp-content/plugins/hoot-customcode/style.css

select[name="seq_ques[]"], input[name="seq_ans[]"] {
    width: 100%;
    background: #f9f9f9;
}

should be

select[name="seq_ques[]"], input[name="seq_ans[]"] {
    width: 100%;
    background-color: #f9f9f9;
}

B - Override the css that is causing the issue

If you can't modify the css file that is causing the issue, then you can override the offending rule.

html select[name="seq_ques[]"], html input[name="seq_ans[]"] {
    width: 100%;
    background-color: #f9f9f9;
}

This selector above has higher priority than the one causing the issue and will leave the arrows while having the #f9f9f9 color in the background. If you don't want that color, you can also change to whichever color you want, such as #ffffff for white.

Upvotes: 1

Related Questions