The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Don't display some values in a Select, is possible with css?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #274951

    Hi, we have a select like this …

    <select id="mybooking" name="seats" class="form-control form-control-lg">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>

    in some pages we need not display options 1, 2, 3, 4 and 5
    code constructs the select values for each page, we cannot add to each value a display none, we need a code to insert in a specific page, what code should we use to modify the select of a specific page?

    1 – Is possible with css don’t display options 1, 2, 3, 4 and 5?
    2 – by default select value is 1, is possible with css select value is 6?

    Many thanks


    The first is certainly possible with CSS provided you can add a class to the options you don’t want to see.

    Then just base your CSS selector on the page it’s on (assuming your page has a class, which is probably a good idea anyway.

    Regarding the second you can’t do this with CSS as selected is an HTML attribute and has to be added to the HTML, either manualy or by Javascript.



    For the first question: Is possible with css don’t display options 1, 2, 3, 4 and 5?

    you may also use:

    select option:nth-child(-n+6){ 

    As for the second question I would use JavaScript:

    let option6 = document.querySelectorAll(
    "#mybooking option")[6];

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.