Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cannot highlight last option in "select" element

Select element with four options, when I move the mouse over each of the first three options the option changes from black text on white background to white text on blue background, as expected. However, when I move the mouse over the last option its appearance does not change.

If I use a select with only three options, the last element is highlighted white on blue as expected.


This is Google chrome issue


like image 819
user2699940 Avatar asked Jan 21 '14 13:01

user2699940


People also ask

How do you style the option of an HTML select element?

You can use inline styles to add custome styling to <option> tags. For eg : <option style="font-weight:bold;color:#09C;">Option 1</option> This will apply the styles to this particular <option> element only.

How do you not highlight text in CSS?

You can use the user-select property to disable text selection of an element. In web browsers, if you double-click on some text it will be selected/highlighted. This property can be used to prevent this.

How do you use the select element?

The <select> element is used to create a drop-down list. The <select> element is most often used in a form, to collect user input. The name attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the drop-down list will be submitted).

How do you highlight an element in HTML?

The <mark> tag defines text that should be marked or highlighted.


1 Answers

This issue is know and blogged about on frankcode. The following workarounds exist:

  • Change windows theme to Windows 7 Basic (may require a certain level of user permission)
  • Use the scroll wheel or up and down arrows (fix for select box only)
  • Upgrade to the Beta release / Canary (I would not recommend this)
  • Move to another browser
like image 138
Martyn0627 Avatar answered Oct 19 '22 23:10

Martyn0627