Apply a style to the selected option only

Question

I'm making a website that you shows you sentences that you can edit using a select. I would like the option to keep the style when defined. Or be able to detect the class="something" to style the select.

actually, what I made is able to detect if the class="something" is clicked and apply the style to every select not just the one with the selected word.

To be simple, I would like to apply a different to the word that has the "something" class when it is select (not only in the dropdown menu).

here is a bit someone helped to do:

$('select').on('change', function () {
let phrase = $('.un').get().reduce((a, b) => a + ' ' + b.value, '').substring(1).trim();
console.log(phrase);
var selectedOption = $(this).find('option:selected');
var optionClass = selectedOption.attr('class');//here you can get option class
if(optionClass === "something"){
  //do stuff here
}
if (phrase.includes('il est bleu')) {
    $(".white").css('background-color', 'blue');
} else {
    $(".white").css('background-color', 'white');
}
});

But this is applying a style to all of my select, not just the one with the option class="something" selected

 $(document).ready(function() {

                        });

                        let phrases = ["il n'est pas. "

                        ];
                        let lettres = /[\u0041-\u005a\u0061-\u007a\u00aa-\u00b5\u00ba-\u00c0\u00c1-\u00d6\u00d8-\u00f6]/gui;

                        tokenize = function(phrase) {
                            let mots = [''];
                            let it = phrase[Symbol.iterator]();
                            for (var c = it.next(); !c.done; ) {

                                for (; !c.done && c.value.match(lettres); c = it.next()) {
                                    mots[mots.length-1]+=(c.value);
                                }
                            //console.log(c.value);
                            if (mots[mots.length-1].length != 0 ){
                                mots.push('');
                            }

                            if (c.value == ' ') {
                                for (c = it.next(); !c.done && c.value == " "; c = it.next()) {continue;} continue;
                            } 
                                // console.log(i);
                                
                                console.log(mots);

                                if (!c.value.match(lettres)){
                                    mots[mots.length-1]+=(c.value);
                                //console.log(c.value);
                                mots.push('');
                            }
                            c = it.next();
                        }
                        return mots.slice(0, mots.length-1);

                    
                    }



                    $(document).ready(function() {
                        let LARGEUR = $("#container .repeat").clone();
                        let change=function(){
                            $(".width_tmp_option", this.parent).html($('option:selected', this).val());
                            $(this).width($(".width_tmp_select", this.parent).width());
                        }
                        $('#container').on("change",".un",change);


                        let idx = Math.floor(Math.random() * Math.floor(phrases.length));
                        let mots = tokenize(phrases[idx]);

                        for( var i = 0 ; i < mots.length-1; i++){
                            $('#container .repeat:last-child').after(LARGEUR.clone());}
                            var i = 0;
                            console.log(mots.length);
                            $('#container .repeat').each(function(){
                                $('.un', this).val(mots[i]).each(change);
                                i++;

                            });

           

                            $('select').on('change', function() {
                             let phrase = $('.un').get().reduce((a,b) => a+' '+b.value, '').substring(1).trim(); 
                             console.log(phrase);
                            if (phrase.includes('il est bleu')) {
                                $(".white").css('background-color', 'blue');
                            } else {
                                 $(".white").css('background-color', 'white');
                                }
                           
                            
                 });
            });

 .something{
        color:red;
        font-family: cursive;
    }

    body {
        width: 70vw;
        height: 100vh;
        overflow: normal;
        overflow: hidden;


    }

    .un{
        width: 2rem;
        margin: 0.2rem;
        font-family: sans-serif;
        font-size: 2.5rem; 
    } 


    .un * {

        border-radius: 15px;

        font-size: 2.5rem; 
    }

    option {
        background-color: none;

    }

    option:hover {
        background-color: green;

    }

    ::selection {
        background-color: green;
    }

    .width_tmp_select{
        background-color: none;

    }


    .width_tmp_select{
        display : none;
        font-size: 2.5rem; 
        font-family: 'Rungli-Italic';
    } 


    #p1{
        font-size: 2rem;
        border: none;
    } 



    /* For IE10 */
    select::-ms-expand {
        display: none;

    }

    .repeat {
        display: inline-block;

    }

    .continuer {
        opacity: 0.2;
        position: absolute;
        bottom: 0.5vw;
        right: 0.5vw;
        font-size: 2.5rem; 
        padding: 0.1vw;
    }

    .continuer:hover {
        opacity: 1;

        background-color: white;

    }

<script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>

    <body class="white">

        <div id="container">
            <div class="repeat">

                <select name="mots" class="un">
                    <option  value="il">il</option>
                    <option  class="something" value="est">est</option>  // I would like this one to have another style that the rest of the phrase.
                    <option value="bleu">bleu</option>
                    <option value="n">n</option>
                    <option value="'">'</option>
                    <option value="pas">pas</option>
                    <option value=".">.</option>

                </select>
                <select class="width_tmp_select">
                    <option class="width_tmp_option"></option>
                </select>
            </div>
        </div>

    </body>

Answer 1

Please use these method.

Method 1

HTML :-

<select>
  <option value="">Please choose</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</select>

CSS:-

select option {
    margin: 40px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
select option {
  margin: 40px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

select option[value="1"] {
  background:red;
}

select option[value="2"] {
  background:#00CC99;
}

select option[value="3"] {
  background: rgba(200, 200, 200, 0.3);
}

select option[value="4"] {
  background: rgba(250, 250, 250, 0.3);
}

Method 2 :-

HTML :-

<select id="reviewAction">
<option class="greenColor">Accept and Advance Status</option>
<option class="redColor">Return for Modifications</option>
</select>

CSS:-

.greenColor{
    background-color: #33CC33;
}
.redColor{
    background-color: #E60000;
}

Answer 2

First, you have to find the parent element of the something class option, and apply the CSS on that. You also have to remove the styling when the selection is unmade.

var selectedOption = $(this).find('option:selected');
var optionClass = selectedOption.attr('class');//here you can get option class
if(optionClass === "something"){
    selectedOption.parent().css('color', 'red');
} else {
    selectedOption.parent().css('color', '');
}

You'll notice, that in this case the <option> elements inherit the red style of their parent <select>. To avoid this, expicitly specify black fonts for <option>s that are not something class.

option:not(.something) {
    color:black;
}

$(document).ready(function() {

                        });

                        let phrases = ["il n'est pas. "

                        ];
                        let lettres = /[\u0041-\u005a\u0061-\u007a\u00aa-\u00b5\u00ba-\u00c0\u00c1-\u00d6\u00d8-\u00f6]/gui;

                        tokenize = function(phrase) {
                            let mots = [''];
                            let it = phrase[Symbol.iterator]();
                            for (var c = it.next(); !c.done; ) {

                                for (; !c.done && c.value.match(lettres); c = it.next()) {
                                    mots[mots.length-1]+=(c.value);
                                }
                            //console.log(c.value);
                            if (mots[mots.length-1].length != 0 ){
                                mots.push('');
                            }

                            if (c.value == ' ') {
                                for (c = it.next(); !c.done && c.value == " "; c = it.next()) {continue;} continue;
                            } 
                                // console.log(i);
                                
                                console.log(mots);

                                if (!c.value.match(lettres)){
                                    mots[mots.length-1]+=(c.value);
                                //console.log(c.value);
                                mots.push('');
                            }
                            c = it.next();
                        }
                        return mots.slice(0, mots.length-1);

                    
                    }



                    $(document).ready(function() {
                        let LARGEUR = $("#container .repeat").clone();
                        let change=function(){
                            $(".width_tmp_option", this.parent).html($('option:selected', this).val());
                            $(this).width($(".width_tmp_select", this.parent).width());
                        }
                        $('#container').on("change",".un",change);


                        let idx = Math.floor(Math.random() * Math.floor(phrases.length));
                        let mots = tokenize(phrases[idx]);

                        for( var i = 0 ; i < mots.length-1; i++){
                            $('#container .repeat:last-child').after(LARGEUR.clone());}
                            var i = 0;
                            console.log(mots.length);
                            $('#container .repeat').each(function(){
                                $('.un', this).val(mots[i]).each(change);
                                i++;

                            });

           

                            $('select').on('change', function() {
                             let phrase = $('.un').get().reduce((a,b) => a+' '+b.value, '').substring(1).trim(); 
                             console.log(phrase);
                             var selectedOption = $(this).find('option:selected');
                             var optionClass = selectedOption.attr('class');//here you can get option class
                             if(optionClass === "something"){
                                selectedOption.parent().css('color', 'red');
                             } else {
                                selectedOption.parent().css('color', '');
                             }
                            if (phrase.includes('il est bleu')) {
                                $(".white").css('background-color', 'blue');
                            } else {
                                 $(".white").css('background-color', 'white');
                                }
                           
                            
                 });
            });

.something{
        color:red;
        font-family: cursive;
    }

option:not(.something) {
    color:black;
}

    body {
        width: 70vw;
        height: 100vh;
        overflow: normal;
        overflow: hidden;


    }

    .un{
        width: 2rem;
        margin: 0.2rem;
        font-family: sans-serif;
        font-size: 2.5rem; 
    } 


    .un * {

        border-radius: 15px;

        font-size: 2.5rem; 
    }

    option {
        background-color: none;

    }

    option:hover {
        background-color: green;

    }

    ::selection {
        background-color: green;
    }

    .width_tmp_select{
        background-color: none;

    }


    .width_tmp_select{
        display : none;
        font-size: 2.5rem; 
        font-family: 'Rungli-Italic';
    } 


    #p1{
        font-size: 2rem;
        border: none;
    } 



    /* For IE10 */
    select::-ms-expand {
        display: none;

    }

    .repeat {
        display: inline-block;

    }

    .continuer {
        opacity: 0.2;
        position: absolute;
        bottom: 0.5vw;
        right: 0.5vw;
        font-size: 2.5rem; 
        padding: 0.1vw;
    }

    .continuer:hover {
        opacity: 1;

        background-color: white;

    }

<script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>

    <body class="white">

        <div id="container">
            <div class="repeat">

                <select name="mots" class="un">
                    <option  value="il">il</option>
                    <option  class="something" value="est">est</option>  // I would like this one to have another style that the rest of the phrase.
                    <option value="bleu">bleu</option>
                    <option value="n">n</option>
                    <option value="'">'</option>
                    <option value="pas">pas</option>
                    <option value=".">.</option>

                </select>
                <select class="width_tmp_select">
                    <option class="width_tmp_option"></option>
                </select>
            </div>
        </div>

    </body>

Answer 3

css

.select:focus
{
  // your special styling
}

.select:focus-within
{
  // your special styling
}

Keep them separate because ie11 doesn't understand :focus-within and breaks all the focus styling for it.

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within

Answer 4

Please try this

I changed background-color to background.

$(".white").css('background', 'blue');

$(".white").css('background', 'white');