HTML. CSS. input disabled - input readonly
En IExplorer hay problemas con los input disabled, pero podemos usar los input readonly.
Con los input disabled en el IExplorer no coge el del color de la fuente. Lo pone a un color gris claro.
Pero con los input readonly si que coge el color de la fuente.
Además los input disabled no se envian ni por el POST ni por el GET.
En cambio los input readonly si se envían en la petición.
En Mozilla FireFox los input disabled si que cogen el estilo del color de la fuente.
<input type="text" id="campo_disabled" name="campo_disabled"
size="5" readonly="readonly" value="deshabilitado"/>
<input type="text" id="campo_readonly" name="campo_readonly"
size="5" disabled="disabled" value="solo lectura"/>
input {
border: #7f9db9 1px solid;
padding:0 0 0 3px;
font-family:Tahoma,Georgia,serif;
font-weight: lighter;
color:#007EF4;
}
input [disabled] {
background-color: #D4D0C8;
}
input [readonly] {
background-color: #D4D0C8;
}
http://www.htmlcodetutorial.com
Con los input disabled en el IExplorer no coge el del color de la fuente. Lo pone a un color gris claro.
Pero con los input readonly si que coge el color de la fuente.
Además los input disabled no se envian ni por el POST ni por el GET.
En cambio los input readonly si se envían en la petición.
En Mozilla FireFox los input disabled si que cogen el estilo del color de la fuente.
<input type="text" id="campo_disabled" name="campo_disabled"
size="5" readonly="readonly" value="deshabilitado"/>
<input type="text" id="campo_readonly" name="campo_readonly"
size="5" disabled="disabled" value="solo lectura"/>
input {
border: #7f9db9 1px solid;
padding:0 0 0 3px;
font-family:Tahoma,Georgia,serif;
font-weight: lighter;
color:#007EF4;
}
input [disabled] {
background-color: #D4D0C8;
}
input [readonly] {
background-color: #D4D0C8;
}
http://www.htmlcodetutorial.com
Gracias por la info, pero sobra el espacio entre el nombre de la etiqueta y el selector, además para especificar 2 veces el mismo estilo puedes simplificar a una linea
ResponderEliminarinput[disabled], input[readonly] { background:#CCC; }
Incluso si quieres el mismo estilo para todos los elementos desactivos:
*[disabled], *[readonly] { background:#CCC; } {}
Tienes razón gu, sobra un espacio.
ResponderEliminarinput[readonly="readonly"] {
background-color: #b5b5b5;
}
Además del estilo para cada input también aprovechos señalar, que los <input disabled="disabled"/> no se envían por el POST y que los <input readonly="readonly"/> si que se envirán al servidor.
Los readonly nos evitan que puedan jugar con nuestros campos hidden
<input type="hidden" name="idNoticia" readonly="readonly"/> al menos desde el Web Developer del firefox.
Desde javascript es útil cambiar ciertos inputs a disabled para así enviar al servidor solo los parámetros imprescindibles. Muy útil para AJAX (XHR)