div - title html css

opción de selección predeterminada como en blanco (12)

Tengo un requisito muy extraño, en el que no debo tener ninguna opción seleccionada de forma predeterminada en el menú desplegable en HTML Sin embargo,

No puedo usar esto,

<select> <option></option> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select>

Porque para esto tendré que hacer validación para manejar la primera opción. ¿Puede alguien ayudarme a lograr este objetivo sin incluir realmente la primera opción como parte de la etiqueta de selección?

Hoy (2015-02-25)

Esto es HTML5 válido y envía un espacio en blanco (no un espacio) al servidor:

<option label=" "></option>

Validez verificada en http://validator.w3.org/check

Comportamiento verificado con Win7 (IE11 IE10 IE9 IE8 FF35 Safari5.1) Ubuntu14.10 (Chrome40, FF35) OSX_Yosemite (Safari8, Chrome40) Android (Samsung-Galaxy-S5)

Lo siguiente también pasa la validación hoy , pero también pasa una especie de carácter de espacio al servidor de la mayoría de los navegadores (probablemente no es deseable) y un espacio en blanco en otros (Chrome40 / Linux pasa a un espacio en blanco):

<option> </option>

Anteriormente (2013-08-02)

De acuerdo con mis notas, la entidad sin espacio de ruptura dentro de las etiquetas de opción mostradas arriba produjo el siguiente error en 2013:

Error: Servicio de Validación de Marcado W3C (Público): el primer elemento de opción secundaria de un elemento de selección con un atributo requerido y sin un atributo múltiple, y cuyo tamaño es 1, debe tener un atributo de valor vacío o no debe tener contenido de texto.

En ese momento, un espacio regular era XHTML4 válido y se envió un espacio en blanco (no un espacio) al servidor desde cada navegador:

<option> </option>

Futuro

Me alegraría el corazón si la especificación se actualizara para permitir explícitamente una opción en blanco. Preferiblemente utilizando la sintaxis más breve. Cualquiera de los siguientes sería genial:

<option /> <option></option>

Archivo de prueba

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Test</title> </head> <body> <form action="index.html" method="post"> <select name="sel"> <option label=" "></option> </select> </form> </body> </html>

Entiendo lo que estás tratando de hacer. La mejor y la más exitosa es:

<select name=''department'' required> <option value="">None</option> <option value="Teaching">Teaching department</option> <option value="nonTeaching">Non-teaching department</option> </select>

Estoy usando el framework Laravel 5 y la respuesta de @Gambi también me funcionó, pero con algunos cambios para mi proyecto.

Tengo los valores de opción en una tabla de base de datos y los uso con una instrucción foreach. Pero antes de la declaración, he agregado una opción con la configuración sugerida de @Gambit y funcionó.

Aquí mi ejemplo:

@isset($keys) <select> <option disabled selected value></option> @foreach($keys as $key) <option>{{$key->value)</option> @endforeach </select> @endisset

Espero que esto ayude a alguien también. ¡Sigan con el buen trabajo!

No hay solución HTML. Según la especificación HTML 4.01, el comportamiento del navegador no está definido si ninguno de los elementos de option tiene el atributo selected , y lo que hacen los exploradores en la práctica es que hacen que la primera opción sea preseleccionada.

Como solución alternativa, puede reemplazar el elemento de select por un conjunto de elementos de input type=radio de input type=radio (con el mismo name atributo). Esto crea un control del mismo tipo, aunque con una apariencia y una interfaz de usuario diferentes. Si ninguno del input type=radio elementos de input type=radio tiene el atributo checked , ninguno de ellos se selecciona inicialmente en la mayoría de los navegadores modernos.

Podrías usar Javascript para lograr esto. Prueba el siguiente código:

HTML

<select id="myDropdown"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select>

document.getElementById("myDropdown").selectedIndex = -1;

o JQuery

$("#myDropdown").prop("selectedIndex", -1);

Prueba esto:

<h2>Favorite color</h2> <select name="color"> <option value=""></option> <option>Pink</option> <option>Red</option> <option>Blue</option> </select>

La primera opción en el desplegable estaría en blanco.

Prueba esto:

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

Valida en HTML5. Trabaja con el atributo required en el elemento de selección. Puede ser re-seleccionado. Funciona en Google Chrome 45, Internet Explorer 11, Edge, Firefox 41.

Solución que funciona utilizando solo CSS:

A: CSS en línea

<select> <option style="display:none;"></option> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select>

B: Hoja de estilo CSS

Si tiene un archivo CSS a mano, puede apuntar a la primera option usando:

select.first-opt-hidden option:first-of-type { display:none; }

<select class="first-opt-hidden"> <option></option> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select>

Tal vez esto sea de ayuda

<select> <option disabled selected value> -- select an option -- </option> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select>

-- select an option -- Se mostrará de forma predeterminada. Pero si elige una opción, no podrá volver a seleccionarla.

También puedes ocultarlo usando una option vacía.

<option style="display:none">

por lo que ya no aparecerá en la lista.

Usa jQuery:

//With jQuery 1.7.2 $("#myDropdown").attr("selectedIndex", -1);

Probado y probado para jQuery v1.7.2 (última versión desde el 18 de abril de 2012), sin embargo, ''prop'' no funciona para esta versión.

<td><b>Ação da atividade:</b><br> <select style=''align:left; width:100%;'' id=''cbxTipoSFA'' name=''cbxTipoSFA''> <option hidden selected>Selecione uma opção</option> <option value=''Instalação''>Instalação</option> <option value=''Solicitação''>Solicitação</option> <option value=''Retirada''>Retirada</option></select> </td>

Simplemente ponga "oculto" en la opción que desea ocultar en la lista desplegable.

<select required> <option value="" disabled selected>None</option> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>

Puede evitar la validación personalizada en este caso.