Проектирование стиля тега Select

Question

Я просто хочу спросить, возможно ли, что текст в выделенном курсе выделен курсивом, а затем, когда пользователь выбрал вариант, текст изменится на нормальный? То, что я сделал, - это когда выбор используется, текст в обычном стиле, но после его фокусировки текст меняется на курсив. То, что я хочу, является курсивным сначала, когда пользователи выбрали, текст изменится на нормальный. Вот ссылка на мою работу. Помогите. Заранее спасибо. http://jsfiddle.net/franscla/xcd0smxj/

`HTML 
<div class='select'><select > 
            <option>- Select subject -</option> 
            <option >Purchase</option> 
            <option style='height:50px;'>Be Our Partner</option> 
            <option>Technical Problems</option> 
            <option>Others</option> 
           </select></div> 

CSS 


    .select { 
    margin-top:10px; 
    background: none repeat scroll 0 0 #fff; 
    border: 1px solid #455d74; 
    box-sizing: border-box; 
    display: inline-block; 
    height: 40px; 
    position: relative; 
    vertical-align: top; 
    width: 400px; 
    font-family:Arial; 

} 

.select > select { 
    background: none repeat scroll 0 0 #fff; 
    border: 0 none; 
    color: #7b7b7b; 
    display: block; 
    font-size:14px; 
    height: 35px; 
    line-height: 17px; 
    margin: 0; 
    padding: 9px 6px 5px 9px; 
    width: 100%; 
    font-style:italic; 
} 
.select > select:focus { 
    -moz-outline-radius: 2px; 
    color: #000; 
    outline: 0px solid #3fb6f2; 
    outline-offset: 0; 
    font-style:normal; 
} 


.select:before, .select:after { 
    content: ""; 
    pointer-events: none; 
    position: absolute; 


} 
.select:before { 
    background: inherit; 
    bottom: 0; 
    right: 0; 
    top: 0; 
    width: 29px; 
} 
.select:after { 
    -moz-border-bottom-colors: none; 
    -moz-border-left-colors: none; 
    -moz-border-right-colors: none; 
    -moz-border-top-colors: none; 
    border-color: transparent transparent; 
    background: url(http://www.8bitsports.net/wp-content/themes/morning/functions/wpzoom/assets/images/jquery.selectBox-arrow.gif) no-repeat 100% 100%; 
    border-right: 5px solid transparent; 
    border-style: solid; 
    border-width: 5px; 
    height: 15px; 
    right: 6px; 
    top: 6px; 
    width: 10px; 

} 


` 

Answer 1

Я попытался это то, что вы хотите:

$(".select").focusout(function() { 
 
    $('select').addClass('newclass'); 
 
});

.newclass { 
 
    font-style: normal !important; 
 
    color: black !important; 
 
} 
 
.select { 
 
    margin-top: 10px; 
 
    background: none repeat scroll 0 0 #fff; 
 
    border: 1px solid #455d74; 
 
    box-sizing: border-box; 
 
    display: inline-block; 
 
    height: 40px; 
 
    position: relative; 
 
    vertical-align: top; 
 
    width: 400px; 
 
    font-family: Arial; 
 
} 
 
.select > select { 
 
    background: none repeat scroll 0 0 #fff; 
 
    border: 0 none; 
 
    color: #7b7b7b; 
 
    display: block; 
 
    font-size: 14px; 
 
    height: 35px; 
 
    line-height: 17px; 
 
    margin: 0; 
 
    padding: 9px 6px 5px 9px; 
 
    width: 100%; 
 
    font-style: italic; 
 
} 
 
.select > select:focus { 
 
    -moz-outline-radius: 2px; 
 
    color: #000; 
 
    outline: 0px solid #3fb6f2; 
 
    outline-offset: 0; 
 
    font-style: normal; 
 
} 
 
.select:before, 
 
.select:after { 
 
    content: ""; 
 
    pointer-events: none; 
 
    position: absolute; 
 
} 
 
.select:before { 
 
    background: inherit; 
 
    bottom: 0; 
 
    right: 0; 
 
    top: 0; 
 
    width: 29px; 
 
} 
 
.select:after { 
 
    -moz-border-bottom-colors: none; 
 
    -moz-border-left-colors: none; 
 
    -moz-border-right-colors: none; 
 
    -moz-border-top-colors: none; 
 
    border-color: transparent transparent; 
 
    background: url(http://www.8bitsports.net/wp-content/themes/morning/functions/wpzoom/assets/images/jquery.selectBox-arrow.gif) no-repeat 100% 100%; 
 
    border-right: 5px solid transparent; 
 
    border-style: solid; 
 
    border-width: 5px; 
 
    height: 15px; 
 
    right: 6px; 
 
    top: 6px; 
 
    width: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<div class='select'> 
 
    <select> 
 
    <option>- Select subject -</option> 
 
    <option>Purchase</option> 
 
    <option style='height:50px;'>Be Our Partner</option> 
 
    <option>Technical Problems</option> 
 
    <option>Others</option> 
 
    </select> 
 
</div>