html - password - ¿Cómo desactivo los campos de formulario con CSS?

disable autocomplete chrome

Question

¿Es posible deshabilitar campos de formulario usando CSS? Por supuesto, sé sobre el atributo deshabilitado, pero ¿es posible especificar esto en una regla de CSS? Algo como -

<input type="text" name="username" value="admin" >
<style type="text/css">
  input[name=username] {
    disabled: true; /* Does not work */
  }
</style>

La razón por la que estoy preguntando es que tengo una aplicación donde los campos de formulario se autogeneran y los campos se ocultan / muestran según algunas reglas (que se ejecutan en Javascript). Ahora quiero ampliarlo para admitir campos de inhabilitación / habilitación, pero la forma en que se escriben las reglas manipula directamente las propiedades de estilo de los campos de formulario. Así que ahora tengo que extender el motor de reglas para cambiar los atributos, así como el estilo de los campos de formulario y de alguna manera parece menos que ideal.

Es muy curioso que tenga propiedades visibles y de visualización en CSS, pero no habilite / deshabilite. ¿Hay algo parecido en el estándar HTML5 aún en proceso, o incluso algo no estándar (específico del navegador)?

Answer 1

Es muy curioso que tenga propiedades visibles y de visualización en CSS, pero no habilite / deshabilite.

Es muy curioso que pienses que es muy curioso. Estás malinterpretando el propósito de CSS. CSS no tiene la intención de cambiar el comportamiento de los elementos del formulario. Está destinado a cambiar su estilo solamente. Ocultar un campo de texto no significa que el campo de texto ya no está allí o que el navegador no enviará sus datos cuando envíe el formulario. Todo lo que hace es esconderlo de los ojos del usuario.

Para deshabilitar realmente sus campos, debe usar el atributo disabled en HTML o la propiedad de DOM disabled en JavaScript.

Answer 2

entrada [nombre = nombre de usuario] {deshabilitado: verdadero; /* No funciona */ }

Sé que esta pregunta es bastante antigua, pero para otros usuarios que se encuentran con este problema, supongo que la manera más fácil de desactivar la entrada es simplemente '': disabled''

<input type="text" name="username" value="admin" disabled />
<style type="text/css">
  input[name=username]:disabled {
    opacity: 0.5 !important; /* Fade effect */
    cursor: not-allowed; /* Cursor change to disabled state*/
  }
</style>

En realidad, si tiene alguna secuencia de comandos para deshabilitar la entrada de forma dinámica / automática con javascript o jquery que se desactiva automáticamente en función de la condición que agrega.

En jQuery por ejemplo:

if (condition) {
// Make this input prop disabled state
  $(''input'').prop(''disabled'', true);
}
else {
// Do something else
}

Espero que la respuesta en CSS ayude.

Answer 3

Como las reglas se ejecutan en JavaScript, ¿por qué no desactivarlas usando javascript (o en mi caso de ejemplos, jQuery)?

$(''#fieldId'').attr(''disabled'', ''disabled''); //Disable
$(''#fieldId'').removeAttr(''disabled''); //Enable

ACTUALIZAR

La función attr ya no es el enfoque principal para esto, como se señaló en los comentarios a continuación. Esto ahora se hace con la función prop .

$( "input" ).prop( "disabled", true ); //Disable
$( "input" ).prop( "disabled", false ); //Enable

Answer 4

Esto puede ser útil:

<input type="text" name="username" value="admin" >

<style type="text/css">
input[name=username] {
    pointer-events: none;
 }
</style>

Actualizar:

y si desea deshabilitar el índice de pestañas, puede usarlo de esta manera:

 <input type="text" name="username" value="admin" tabindex="-1" >

 <style type="text/css">
  input[name=username] {
    pointer-events: none;
   }
 </style>

Answer 5

Esto se puede hacer para un propósito no crítico colocando una superposición en la parte superior de su elemento de entrada. Aquí está mi ejemplo en HTML puro y CSS.

https://jsfiddle.net/1tL40L99/

    <div id="container">
        <input name="name" type="text" value="Text input here" />
        <span id="overlay"></span>
    </div>

    <style>
        #container {
            width: 300px;
            height: 50px;
            position: relative;
        }
        #container input[type="text"] {
            position: relative;
            top: 15px;
            z-index: 1;
            width: 200px;
            display: block;
            margin: 0 auto;
        }
        #container #overlay {
            width: 300px;
            height: 50px;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 2;
            background: rgba(255,0,0, .5);
        }
    </style>

Answer 6

La solución práctica es usar CSS para ocultar realmente la entrada.

Para llevar esto a su conclusión natural, puede escribir dos entradas html para cada entrada real (una habilitada y una deshabilitada) y luego usar javascript para controlar el CSS y mostrarlas y ocultarlas.

Answer 7

No hay forma de usar CSS para este propósito. Mi consejo es incluir un código de JavaScript donde asignes o cambies la clase css aplicada a las entradas. Algo como eso :

function change_input() {
 $(''#id_input1'')
  .toggleClass(''class_disabled'')
  .toggleClass(''class_enabled'');
  
 $(''.class_disabled'').attr(''disabled'', '''');
 $(''.class_enabled'').removeAttr(''disabled'', '''');
}

.class_disabled { background-color : #FF0000; }
.class_enabled { background-color : #00FF00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>  
 Input: <input id="id_input1" class="class_enabled" />  
 <input type="button" value="Toggle" onclick="change_input()";/> 
</form>

Answer 8

No puede hacer eso, me temo, pero puede hacer lo siguiente en jQuery, si no desea agregar los atributos a los campos. Solo coloque esto dentro de su etiqueta <head></head>

$(document).ready(function(){ 
  $(".inputClass").focus(function(){
    $(this).blur();
  }); 
});

Si está generando los campos en el DOM (con JS), debe hacer esto en su lugar:

$(document).ready(function(){ 
  $(document).on("focus", ".inputClass", function(){
    $(this).blur();
  }); 
});

Answer 9

No puedes usar CSS para deshabilitar Textbox. la solución sería HTML Attribute.

disabled="disabled"

Answer 10

Puede falsificar el efecto desactivado usando CSS.

pointer-events:none;

Es posible que también desee cambiar los colores, etc.

Answer 11

Siempre estoy usando:

input.disabled {
    pointer-events:none;
    color:#AAA;
    background:#F5F5F5;
}

y luego aplicando la clase css al campo de entrada:

<input class="disabled" type="text" value="90" name="myinput" id="myinput" />

Answer 12

primera vez respondiendo algo, y aparentemente un poco tarde ...

Acepto hacerlo por javascript, si ya lo está usando.

Para una estructura compuesta, como suelo usar, he creado un elemento css pseudo after para bloquear los elementos de la interacción del usuario y permitir el diseño sin tener que manipular toda la estructura.

Por ejemplo:

<div id=test class=stdInput>
    <label class=stdInputLabel for=selecterthingy>A label for this input</label>
    <label class=selectWrapper>
         <select id=selecterthingy>
             <option selected disabled>Placeholder</option>
             <option value=1>Option 1</option>
             <option value=2>Option 2</option>
         </select>
    </label>
</div>

Puedo colocar una clase disabled en el div envoltura

.disabled { 
    position : relative; 
    color    : grey;
}
.disabled:after {
    position :absolute;
    left     : 0;
    top      : 0;
    width    : 100%;
    height   : 100%;
    content  :'' '';
}

Esto sería un texto gris dentro del div y lo haría inutilizable para el usuario.

Mi ejemplo JSFiddle