So richten Sie deaktivierte Optionen in einem Formular ein

Question

Ich verwende ein Formular mit einem Dropdown-Menü, das einige deaktivierte Optionen enthält, sodass die Benutzer sie nicht auswählen können. Ich versuche, über CSS diese Elemente anzupassen, aber ich habe ein paar Probleme mit Chrome und IE7/8/9/10.

HTML:

<div class="formBody"> 
    <select name="form[categoria][]" id="categoria" class="rsform-select-box"> 
     <option selected="selected" value="">Scegli una categoria</option> 
     <option disabled="disabled" value="">Impresa </option> 
    </select> 
    <span class="formValidation"> 
     <span id="component50" class="formNoError">Scegli una categoria</span> 
    </span> 
</div> 

CSS:

select option[disabled] { color: #000; font-weight: bold } 

Dieser Code funktioniert nur mit Firefox und funktioniert nicht mit Chrome und IE (alle Versionen).

Irgendeine Idee, um dieses Problem zu lösen?

---

Unterhalb dem HTML-Code für die Auswahl-Box

<div class="formBody"><select name="form[categoria][]" id="categoria" class="rsform-select-box" ><option selected="selected" value="">Scegli una categoria</option><option disabled="disabled" value="">Impresa </option><option value="Servizi">Servizi</option><option value="Informatica">Informatica</option><option value="Commercio">Commercio</option><option value="Telecomunicazioni">Telecomunicazioni</option><option value="Editoria/Stampa">Editoria/Stampa</option><option value="Meccanica/Elettrica">Meccanica/Elettrica</option><option value="Alimentare">Alimentare</option><option value="Chimica/Farmaceutica">Chimica/Farmaceutica</option><option disabled="disabled" value="">Edilizia </option><option value="Tessile/Moda">Tessile/Moda</option><option value="Mobili/Arredamenti">Mobili/Arredamenti</option><option value="Alberghi/Ristoranti">Alberghi/Ristoranti</option><option value="Trasporto/Logistica">Trasporto/Logistica</option><option value="Finanza">Finanza</option><option value="Altro">Altro</option><option disabled="disabled" value="">Professionista </option><option value="Commercialista">Commercialista</option><option value="Ragioniere">Ragioniere</option><option value="Notaio">Notaio</option><option value="Tributarista">Tributarista</option><option value="Avvocato">Avvocato</option><option value="Consulente del lavoro">Consulente del lavoro</option><option value="Altro">Altro</option><option disabled="disabled" value="">P.A. Locale </option><option value="Regione">Regione</option><option value="Provincia">Provincia</option><option value="Comune">Comune</option><option value="Comunit&agrave; Montana">Comunit&agrave; Montana</option><option value="ASL">ASL</option><option value="CCIA">CCIA</option><option value="Altro">Altro</option><option disabled="disabled" value="">P.A. Centrale </option><option value="Associazione di categoria">Associazione di categoria</option><option value="Privato">Privato</option><option value="Altro">Altro</option></select><span class="formValidation"><span id="component50" class="formNoError">Scegli una categoria</span></span></div> 

Answer 1

Das glaube ich nicht, dass Sie einen option Tag mit reinem CSS ausrichten können; Sie können nur einen select Tag ändern.

• Effort to modify a select tag.
• Same effort to modify an option tag.

Es gibt jedoch Problemumgehungen. Siehe this question.

Answer 2

Was Sie suchen, ist dies:

select option:disabled { 
    color: #000; 
    font-weight: bold; 
} 

Here, have a fiddle.

Achtung: nach den Berichten über den Kommentaren, diese Lösung nicht auf OS X funktioniert

Answer 3

<select> 
    <option value="volvo" >Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="vw" disabled>VW</option> 
    <option value="audi" class="colr">Audi</option> 
    <option value="aaa">Something</option> 
    <option value="ccc">Other</option> 
    <option value="vw" disabled>VW</option> 
    <option value="vvv">Apple</option> 
    <option value="nnn" class="colr">Mango</option> 
    <option value="cmmmcc">Plum</option> 
</select> 

option:disabled { 
    background: #ccc; 
    width: 500px; 
    padding: 5px; 
    } 

option.colr { 
    background: red; 
    width: 500px; 
    padding: 5px; 
    } 

Überprüfen Sie den Link http://jsfiddle.net/W5B5p/110/

Answer 4

var select = document.getElementsByTagName("select"); 

for(var i = 0;i < select.length; i++) 
{ 
var el = select[i]; 
var optVal = el.options[el.selectedIndex].value 
el.addEventListener('change', function() { 
// Using an if statement to check the class 
    if (optVal == "") { 
     el.classList.remove('not_chosen'); 
    } else { 
     el.classList.add('not_chosen'); 
    } 
}); 
} 

Answer 5

<select class="dropdown" name="contactMethod"> 
<option selected disabled>Contact method:</option> 
<option class="dropdownplus"> E-mail: </option> 
<option class="dropdownplus"> Website </option> 
<option class="dropdownplus"> None</option> 
</select> 

<style> 
.dropdown { 
    background-color: rgba(195, 0, 97, 0.1); 
    width: 100%; 
    border: 1px solid #CC0061; 
    border-style: inset; 
    color: grey; 
    text-decoration: none; 
    display: inline-block; 
    font-size: 16px; 
    padding: 10px; 
    margin-top: 10px; 
    margin-bottom: 10px; 
    } 

option.dropdownplus { 
    color: black; 
} 
</style> 

See img https://ibb.co/d9453b