When an option is selected, the CSS class associated with that option is removed

<select class="FunctieSelect">
<option class="yellow" value="-1">- kies -</option>
<option class="yellow" value="1">KSZ functie</option>
<option class="yellow" value="2">Bakker</option>
<option class="yellow" value="3">Schilder</option>
<option class="yellow" value="4">Andere</option>
</select>

with

.yellow
{
    background-color: Yellow;
}

generates the following result:

alt text http://thomasstock.net/selectCss.JPG

In practice, only one option will display a yellow background, making it ineffective to set CSS on the select element.

=> How can I keep the selected option yellow after it has been chosen?

I understand that using jquery to create a "change" event, identifying the selected option, and applying CSS accordingly is a potential solution. However, I am curious if there is a simpler approach available.

Answer №1

Regrettably, the display you are encountering is due to the browser's default widget behavior which cannot be overridden with CSS. There are various solutions you can explore - maybe a resource such as Taming the select could provide some assistance?

Answer №2

I concur with Andrew's point. Additionally, it is worth considering that the usability of a form tends to decrease when you alter the styles of form elements. If your intention is to indicate a modified section of the form, simply highlighting the border around the select option could suffice.

Answer №3

To enhance the appearance of select boxes, consider using JQuery Flexbox as a replacement option. This can provide consistency in how they are displayed across various browsers and platforms. Check out this demo to see it in action.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it a good idea to relocate the document.ready function into its own JavaScript function?

Can the following code be placed inside a separate JavaScript function within a jQuery document.ready, allowing it to be called like any other JavaScript function? <script type="text/javascript"> $(document).ready(function() { $('div#infoi ...

merge two structures to create a unified entity

I have been searching in vain, can you please advise me on how to combine these two simple forms into one? I want it to be like a box with a select option and a button. The challenge for me is merging the two different actions, ".asp", into one script fo ...

How to implement bi-directional scroll animation in JavaScript for top and bottom movements

In my JS project, I experimented with creating animations using the bounding client feature. By scrolling down to reveal certain text or content, I was able to adjust its opacity to 1 by applying the CSS class ".active". However, once the user scrolls back ...

Customize CSS for Vimeo's HTML5 player

Can I customize Vimeo's HTML and CSS attributes? I have a video that autoplays and I don't want the play button. I want to modify this specific class. .a.l .b .as { position: absolute; top: 50%; left: 50%; margin: -2em 0 0 -3.25em; float: none; ...

What is the best way to efficiently set up a scrolling text ticker for repeated use?

I am currently utilizing GreenSock/TweenMax for the creation of scrolling text, inspired by the design seen on this webpage: If you're interested in learning more about Greensock and its capabilities, take a look at their documentation here: While I ...

emphasize elements when cursor hovers

I'm having trouble creating an element highlighter that will highlight an element when the mouse hovers over it. I suspect the issue lies in the relationship between child and parent elements (specifically, when the mouse is on a child element, only ...

Showing the values of selected checkboxes in a select dropdown - here's how!

Link to the jsfiddle : https://jsfiddle.net/a1gsgh11/9/ The JavaScript code seems to not be working on the js fiddle platform. My main concern is that I would like the selected checkbox values to display immediately without needing to submit any buttons. ...

Troubleshooting a GreenSock problem related to the z-index

With the help of GreenSock TweenMax, I have successfully achieved the desired animations. However, I am facing an issue where the "flag" that moves out to the right needs to be positioned over the next diamond instead of being underneath it. Interestingly, ...

Dealing with AngularJS memory leaks caused by jQuery

How can I showcase a custom HTML on an AngularJS page using the given service? app.service('automaticFunctions', function ($timeout) { this.init = function initAutomaticFunctions(scope, $elem, attrs) { switch (scope.content.type) { ...

Is there a file outside of the website's root that needs to be linked?

Hey there, I could use some assistance with a little issue I am having: Running the latest release of Ubuntu server 64bit with 2 virtual websites Here is my folder structure: site1 (Accessible on the web) /var/www/site1 site2 (Intranet site) /var/www ...

Expression fragment in Thymeleaf

In splitting my templates into head/main/footer parts using thymeleaf, I have found a method to include stylesheets and javascript on certain pages while excluding them from others. This is achieved through the use of fragment expressions outlined here. M ...

Dynamic styling updates on page refresh in Next.js

There is a strange issue with my styling that I can't seem to figure out. I have a NavBar set to be 20vh in height and an image set to be 100% in width. However, whenever I refresh the page, the NavBar height decreases and the image width increases si ...

JavaScript code encounters difficulties parsing HTML source

I'm attempting to reconstruct the WhateverOrigin service, which can be found at this link: Nevertheless, when I try running it in my web browser, this code that functioned perfectly with WhateverOrigin no longer functions properly with my imitation s ...

jqGrid: What could be causing the events I defined for grid edit to not fire?

I've been attempting to make in-line edits on a grid, but it seems like none of the events connected to those edits are being triggered. I am specifically looking to use afterSubmit: so that it triggers after the user has edited the Quantity field in ...

Items in a CSS masonry container with a 'column count' feature showcasing drop shadows that elegantly span across multiple lines

I've been experimenting with CSS column count to create a masonry effect for my items. Everything was going smoothly until I added a subtle drop shadow to the items. Upon closer inspection in the jsfiddle link provided, you'll notice that the dr ...

Display search results in Rails without needing to refresh the entire tab

I have a search functionality incorporated within a Bootstrap tab, and I aim to display the search results dynamically without reloading the entire page, specifically within the tab itself. Despite adding 'remote: true' to the form_tag and incor ...

In order to properly adjust the HTML content when resizing the window, it

I'm facing an issue with a toggle setup for displaying content differently based on screen width. Specifically, when the screen size decreases below 600px, it switches to the correct content. However, upon increasing the screen width again, it fails t ...

Improving the efficiency of CSS animations

Is it possible to improve the performance of CSS animation by preventing it from running when the animated object is not visible on the viewport? Thank you! ...

After the initial iteration, the .length function ceases to function properly when

A validation method is set up to check the length of a user input field. It functions properly on the initial try, but does not update if I go back and modify the field. $("#user").blur(function () { if ($("#user").val().length < 3) { $("#userval ...

Where would you start looking if the right side of a table border is not visible?

Where should I start looking if the right side border of a table element in a div is not visible? ...