Esta pregunta se extiende a la creación de campos de entrada con estilo cuando contienen valores
Seguí la sugerencia de David Thomas de usar CSS solo para hacer esto para los campos de entrada de texto y funciona muy bien. He incluido su solución en mi código para obtener información.
Ahora, me gustaría extender la misma idea para las listas de selección.
Tengo este código, que no funciona como se esperaba:
.field-required {border: 1px solid #888;background-color: white;width: 75%;border-radius: 6px;padding: 4px 8px;color: #232856;text-align: left;font-size: 16px;height: 40px;} .field-required:placeholder-shown {border: 2px solid #023a64;background-color: #d0e9f1;} .list-required {border: 1px solid #888;background-color: white;width: 75%;border-radius: 6px;padding: 4px 8px;color: #232856;text-align: left;font-size: 16px;height: 40px;} .list-required option[value="Select"] {border: 2px solid #023a64;background-color: #d0e9f1;width: 100%;border-radius: 6px;padding: 4px 8px;color: #232856;text-align: left;font-size: 16px;height: 40px;} <form method="post" action="xxx.php" enctype="multipart/form-data" value="multipart/form-data"> <label for="field">Text Field:</label><br> <input class="field-required" type="text" name="field" id="field" placeholder="Enter text …"><br><br> <label for="list">Select …</label><br> <select id="list" name="list" class="list-required"> <option value="Select" selected>Select …</option> <option value="Item 1">Item 1</option> <option value="Item 2">Item 2</option> </select><br> </form>Agregué requerido en la etiqueta Seleccionar y agregué el atributo deshabilitado en la primera opción. en CSS agregué select:required:invalid que cambia el fondo a azul claro y también escondo la primera opción
.field-required { border: 1px solid #888; background-color: white; width: 75%; border-radius: 6px; padding: 4px 8px; color: #232856; text-align: left; font-size: 16px; height: 40px; } .field-required:placeholder-shown { border: 2px solid #023a64; background-color: #d0e9f1; } .list-required { border: 1px solid #888; background-color: white; width: 75%; border-radius: 6px; padding: 4px 8px; color: #232856; text-align: left; font-size: 16px; height: 40px; } select:required:invalid { border: 2px solid #023a64; background-color: #d0e9f1; width: 100%; border-radius: 6px; padding: 4px 8px; color: #232856; text-align: left; font-size: 16px; height: 40px; } option[value=""][disabled] { display: none; } option { color: #232856; background-color: white; } <form method="post" action="xxx.php" enctype="multipart/form-data" value="multipart/form-data"> <label for="field">Text Field:</label><br> <input class="field-required" type="text" name="field" id="field" placeholder="Enter text …"><br><br> <label for="list">Select …</label><br> <select id="list" name="list" class="list-required" required> <option value="" disabled selected>Select …</option> <option value="Item 1">Item 1</option> <option value="Item 2">Item 2</option> </select><br> </form>