style - estilos de texto css ejemplos

Cambiar el color de la fuente en Textboxes en IE que están deshabilitados

Question

Me di cuenta de que puedes cambiar el color del texto en los cuadros de texto que están desactivados en Firefox aplicando una clase simple pero no se pudo obtener una forma de hacerlo en IE 6/7. ¿Alguien tiene una solución elegante para lograr esto?

Answer 1

Noté que puedes cambiar el color del texto en los cuadros de texto que están deshabilitados en Firefox

Creo que lo que la pregunta intenta decir es que esto:

<textarea disabled="disabled" style="color: red;">Hello</textarea>

Resultados en texto gris en IE, frente a rojo en Fox. FWIW, Opera también da gris, mientras que los navegadores WebKit dan rojo.

Este es un problema de CSS puro que tiene que ver con la cantidad de campos de formulario que se representan de acuerdo con el conjunto de widgets del sistema operativo y cuánto de acuerdo con las reglas de CSS. Este siempre ha sido un área de gran diferencia entre navegadores. La creación de scripts no es relevante, aunque SO querría que "use jQuery" fuera la respuesta a cada pregunta.

La solución habitual es usar ''readonly'' en lugar de ''disabled'', luego use el estilo (por ejemplo, basado en ''class ='' ​​disabled '''') para reproducir el efecto de sombreado que desee. Los controles ''de solo lectura'' no se convierten en widgets de nivel de sistema operativo, lo que le da más libertad para diseñarlos.

Answer 2

Afaicr en el HTML se ve algo así como <textarea disabled="disabled"> right? Usted podría salirse con textarea[disabled="disabled"] en IE7 (sin embargo, podría no funcionar en IE6).

La respuesta de fredrikholmstrom es la mejor solución entre navegadores.

Answer 3

Cabe señalar que el uso del atributo disabled hace que el elemento <input> subyacente no se envíe durante un envío de formulario, mientras que los controles de readonly se envían al servidor. Por lo tanto, no debe usar readonly si su código de servidor no espera un valor de ese control.

Según mi experiencia, tratar de hackear algo para obtener una presentación aceptable generalmente no vale la pena. Te sugiero que cambies tu CSS para que el estilo de texto desactivado de IE no entre en conflicto con tu estilo de control subyacente o utilices texto con estilo en lugar del control (ya que los controles desactivados no son exitosos para el envío de todos modos). Trabaja con el navegador y no en contra.

Answer 4

Problema con IE que no puede aplicar el estilo para el control deshabilitado, es por eso que primero tenemos que eliminarlo de nuestros cuadros de texto, luego agregamos nuestro estilo y deshabilitamos el enfoque en el control. Intenté también desvincular (''focus'') pero no funcionó.

Entonces usé JQUERY para esto:

var disabledControls = $("input:disabled, textarea:disabled");
disabledControls.removeAttr(''disabled'');
disabledControls.addClass("is-disabled");
disabledControls.focus(function() {
this.blur();
});

Clase de CSS:

.is-disabled {
background-color: #EBEBEB;
color: black !important;
}

Funciona perfectamente en IE8 / 9 y Chrome ...

Answer 5

Puede usar lo siguiente para simular el comportamiento de campo deshabilitado con las siguientes líneas:

// find all disabled fields
$("input:disabled, textarea:disabled, select:disabled").each(function(index){
// add the class is_disabled
$(this).addClass("is_disabled");
// remove the attribut disabled
$(this).removeAttr(''disabled'');
// add new attribut readonly
$(this).attr(''readOnly'', ''readOnly'');
});
// on submit remove all fields which are still with class is_disabled
$(''form'').submit(function() {
// find all fields with class is_isabled
$("input.is_disabled, textarea.is_disabled, select.is_disabled").each(function(index){
// and remove them entirely
$(this).remove();
});
return true;
});
// now don''t let anyone click into the fields
// this will simulate the ''disabled'' functionality
$(''.is_disabled'').click(function() {
$(''.is_disabled'').blur();
});

Answer 6

Supongo que puedes escribir el CSS para eso en lugar de seguir adelante con JQuery. No lo he probado. Pero si deshabilita un área de texto, debería ocuparse de los estilos automáticamente. Agregue esto a su hoja de estilo y avíseme ...

input[disabled][type=''text''], textarea[disabled]{ color: rgb(0,0,0); background-color:Silver;}

Answer 7

También busqué una solución simple y sin guiones. Lo siguiente funcionó para mí en IE 8. La idea es usar transparencia de fondo y un filtro para transformar y colorear el texto. Esto oscurece el texto desactivado lo suficiente como para que sea legible.

textarea[disabled], select[disabled], input[type=''text''][disabled] {
/*required*/
background-color:transparent;
filter: light;
/*fine tuning*/
font-weight:100;
font-family: Tahoma;
border: 1px solid;
letter-spacing:1px;
}

La select no tiene una sombra paralela, por lo tanto, haga que el texto sea muy grueso para obtener un efecto similar de peso de fuente.

select[disabled] {
font-weight:900;
}

Answer 8

Tienes dos opciones (ya que IE 6/7 no es compatible con: css-selector desactivado)

1. Use jQuery (o alguna otra js-lib de su elección) y aplique una clase a todos los elementos de entrada deshabilitados, por ejemplo: $ ("input: disabled, textarea: disabled"). AddClass ("is-disabled");
2. Agregue la clase "is-disabled" manualmente en el lado del servidor, esto solo es viable si sabe de antemano qué elementos se desactivarán y cuáles no.

Answer 9

Tuve el mismo problema con los elementos <select> en IE10 y encontré una solución:

http://jsbin.com/ujapog/90

Hay un elemento de Microsoft pseudo que permite modificar el color del texto:

select[disabled=''disabled'']::-ms-value {
color: #000;
}

La regla debe ser independiente, porque de lo contrario, otros navegadores ignorarán toda la regla debido a un error de sintaxis. Consulte http://msdn.microsoft.com/en-us/library/ie/hh869604(v=vs.85).aspx para otros elementos de psuedo de Internet Explorer.

EDITAR: El elemento -ms-value se introdujo en IE10, por lo que no funcionará en versiones anteriores.

Answer 10

Use una superposición de etiqueta:

<asp:Label ID="lblTxtHider" runat="server" Text="" CssClass="hidden" Enabled="false"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server" CssClass="frmItem" Visible="false" OnTextChanged="TextBox1_TextChanged"></asp:TextBox>

Luego en CSS:

.disabledColorChanger {
position: absolute;
font-family: Arial;
font-size: 13px;
margin-top: 3px;
margin-left: 4px;
}
.disabledColorChanger[disabled] {
display:none;
}

Y en código al configurar o deshabilitar:

private void SetEnabled(bool enabled)
{
lblTxtHider.Enabled = !enabled;
TextBox1.Enabled = enabled;
lblTxtHider.Text = TextBox1.Text;
}

Y el código CORREGIDO para detectar es decir:

<script>
$(document).ready(function () {
var isIE = /*@cc_on!@*/false || !!document.documentMode;
if (isIE) {
document.getElementById("<%=lblTxtHider.ClientID%>").className = "disabledColorChanger";
}
});
</script>

Simplemente configure la etiqueta = el valor de entrada. Funciona para mi.

Answer 11

input [disabled] y input [readonly] funciona en IE 7, 8 y 9 cuando agrega esta línea al archivo html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">