Question

我正在建立一个网站，向您显示可以使用选择内容进行编辑的句子。我希望在定义时保留样式。或者能够检测到class="something"来设置选择的样式。

实际上，我所做的工作能够检测是否单击了class =“ something”，并将样式应用于每个选择，而不仅是带有所选单词的样式。

为简单起见，我想对具有“ something”类的单词进行选择（不仅在下拉菜单中）。

以下是有人帮助您完成的事情：

$('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');
}
});

但这正在将一种样式应用于我所有的选择，而不仅仅是具有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

首先，您必须找到something类选项的父元素，然后在其上应用CSS。取消选择时，还必须删除样式。

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', '');
}

您会注意到，在这种情况下，<option>元素继承了其父<select>的红色样式。为避免这种情况，请为非<option>类的something明确指定黑色字体。

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 2

请尝试

我将background-color更改为background。

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

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

Answer 3

css

.select:focus
{
  // your special styling
}

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

将它们分开，因为ie11无法理解：focus-within并破坏了所有焦点样式。

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

Answer 4

请使用这些方法。

方法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);
}

方法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;
}

仅将样式应用于所选选项

4 个答案: