Applying CSS selectors to target child elements within a select option

I am looking to apply a CSS selector only on select option child values. I have assigned an id to the selector and now I want to apply different CSS styles to each child (child 1, child 2, etc).

<select name="options[81]" id="select_81" class="required-entry product-custom-option">
    <option value="">-- Please Select --</option>
    <option value="229" price="0">ariel </option>
    <option value="230" price="0">times new roman </option>
</select>

I have tried several selectors but none seem to work:

select#select_81.required-entry.product.custom-option:nth-child(2){
    font-family: 'Arial';
}

select#select_81.required-entry.product.custom-option:nth-child(3){
    font-size: 30px;
    font-weight: 800;
}

#select_81.required-entry.product.custom-option:nth-child(3){
    font-size: 30px;
    font-weight: 800;
}

#select_81:nth-child(3){
    font-size: 30px;
    font-weight: 800;
}

select#select_81option:nth-child(2), option:nth-child(3) {
    font-weight: bold;
}

How can this be achieved using CSS?

htmlcss

Answer №1

The majority of web browsers restrict the amount of customization allowed on standard <select> dropdown menus. This limitation has spurred the creation of tools like Select2.

To learn more about customizing dropdown menus, visit: https://css-tricks.com/dropdown-default-styling/

Answer №2

That's because you're using .product.custom-option instead of .product-custom-option.

However, there's no need for such complicated code.

To address your query about selecting the nth option, you can utilize the :nth-child() selector:

select#select_81 option:nth-child(1) {}
select#select_81 option:nth-child(2) {}
select#select_81 option:nth-child(3) {}
select#select_81 option:nth-child(4) {}
select#select_81 option:nth-child(5) {}
...

It's worth noting that styling the options within a select dropdown is limited as they usually come with default styles that cannot be modified.

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

AngularJS - Unchecked radio button issue

Within my code, there is an ng-repeat including several radio buttons: <div class="panel panel-default" ng-repeat="item in vm.itemList"> ... <td ng-show="item.edit"> <div class="row"> ...

javascripthtmlangularjsradio-button

The margin-bottom property does not cause the element to shift or re

Need help with creating a 3-line effect using div and before/after selectors. When applying margin-top in the after selector, the line moves down properly. However, when trying to move the line up using margin-bottom in the before selector, it's not w ...

htmlcss

verified that all form checkboxes were selected in angularJS

Hey there, I have a form in AngularJS with multiple checkboxes. When the first checkbox (Check All) is clicked, I want all the checkboxes to be checked. How can I achieve this using Angular for each field loop? Below is a snippet of my code: vm.asas = f ...

htmlangularjsforms

Display each value in a foreach loop just a single time

Utilizing a foreach loop to store error messages from invalid user inputs in an array, converting it into a string, and displaying them on another page. However, although the string is successfully displayed, it appears multiple times. This snippet showca ...

phphtmlregistration

Django: Sending Templates through AJAX for Dynamic Rendering

Hey there, this is more of a theoretical question. So I recently discovered a cool trick: using AJAX to trigger a function that delivers a pre-rendered HTML template as a response, which can then be applied to a designated div element. This method feels i ...

pythonhtmldjangoajaxdjango-templates

Can you explain the purpose of :not(style) ~ :not(style) in CSS?

Upon investigating, I found that Mui automatically included a :not(style) ~ :not(style) selector which required the use of !important in my sx to override. .css-1rb8ayf-MuiStack-root > :not(style) ~ :not(style) { margin-top: 40px; } .css-d13d9m-MuiSta ...

cssmaterial-ui

"Learn the step-by-step process of generating a transcript with a WebVTT file in JWPlayer

We have integrated JWPlayer into our website and are now looking to add transcript captioning. I have attempted to create a sample application using regular HTML code, but have not been successful. Despite reviewing multiple tutorials, I was unable to ach ...

jqueryhtmljwplayerwebvttinteractive-transcript

How can I make two lines equal in length by stretching them?

Looking to replicate the design shown in the image below using CSS: https://i.stack.imgur.com/cZiFT.png It's crucial for me that both lines are of equal length: https://i.stack.imgur.com/8phWR.png I attempted to recreate it with the following code ...

css

Incorporating Social Share Buttons to Enhance User Engagement on Your WordPress E

Looking to enhance my product page by adding social icons right below the 'Add to Cart' button. The product page URL is https://flowersforeveryone.co.za/product/cheerful-orange-tulips/. I already have a 'social menu' set up. How can I ...

phpcsswordpresswoocommerce

Ensure this div adapts to different screen sizes

I have attempted using a width of 100%, but unfortunately, it did not result in a responsive design. To illustrate my point, here is the link to what I am striving to achieve in terms of responsiveness: codepen link div { background:url(https://i.stac ...

htmlcss

HTML min-width is not being considered by the media query breakpoint

After resizing the browser window to less than 480px, my site reverts back to its original style (the css not defined inside the mixins). I attempted to limit the html with min-width, but despite the browser displaying a horizontal scrollbar, the css still ...

htmlcssmedia-queriescontainer-queries

Tips for showcasing an image on an HTML page

I am encountering an issue with my HTML page that includes a Button. When clicked, it is supposed to display an image using an Ajax call. The functionality works properly in Postman Rest Client. However, when accessed through a browser, it only shows raw ...

javascriptjqueryhtmlajaximage

Challenge with the positioning of HTML output layout

Is there a way to center the output/result of the HTML code below both horizontally and vertically on the web page using CSS? I have tried the following code but it only centers the output horizontally. Vertical alignment is not working properly. Can someo ...

htmlcss

Encountering difficulties accessing XML file on server via anchor tag

I have an XML file on the server that I am attempting to open in a browser when the user clicks on a link. Below is how I have set up the link, but it is not opening the file: Code: <a title="View XML" href="file://///90.0.0.15/docmgmtandpub/PublishD ...

javascripthtmlfileanchor

When the textfield mui is set to shrink, an additional space appears in the label when using a font size of 12px

Struggling to customize the appearance of the textField component, particularly with the label when it is minimized: import * as React from "react"; import TextField from "@mui/material/TextField"; import { createTheme } from "@mui ...

javascriptcssreactjsmaterial-ui

Transform Typescript into compiled css files without using any additional tools

Currently, I am working on a monorepo project where the main project relies on another project called components. When running the entire monorepo, the main project utilizes webpack.dev while the components project simply uses the TypeScript compiler. It l ...

csstypescriptwebpack

The flipping CSS code will not be compatible with IE 11

I'm experimenting with creating a flip animation that reveals link text when images are flipped. Everything works fine in most browsers, except for IE11. Apparently there's an issue with transform-style: preserve-3d; in IE10, but being new to CS ...

htmlcssinternet-explorerflip

Issue with jQuery AJAX call: When submitting an HTML form, control is not being returned to the calling

I am facing an issue with my HTML form where it is loaded correctly into the DOM through a jQuery ajax call. The problem arises when I submit the form data to a PHP module using another jQuery ajax call. Even though the network traffic shows that the form ...

javascriptphpjqueryhtmlajax

Is the "sticky footer" in CSS causing issues with the percentage height of nested divs?

My "main-section" div is designed to inherit its height from the parent div, known as the "wrapper." The wrapper div, in turn, takes its height from the body of the document. Both the HTML and body tags are set with a height of 100%. To implement the ...

cssheightpercentagesticky-footerhtml

Is the text in the React chat application too lengthy causing a bug problem?

In my chat application built with React, I am facing an issue where if a user types more than 100 characters, the message gets cut off. How can I fix this problem? Please refer to the image below for reference. {Object.keys(messages).map((keyName) => ...

javascripthtmlcssreactjs