¿Agregar clase Css a todos los elementos <input type'text '>? Javascript/Css?

quiero aplicar una clase CSS para cada cuadro de texto en mi sitio:¿Agregar clase Css a todos los elementos <input type'text '>? Javascript/Css?

 <div class="editor-label"> 
      <label for="FoodType">FoodType</label> 
     </div> 
     <div class="editor-field"> 
      <input id="HelpText" name="FoodType" type="text" value="" /> 
     </div> 

     <p> 
      <input type="submit" value="Create" /> 
     </p>

Y pensé, ¡Hey! Fácil. Agregaré una función jquery para encontrarlos todos en la página maestra.

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('input').addClass('textbox'); 
    } 
</script>

Lamentablemente, esto también seleccionará el botón enviar. ¿Cómo solo puedo seleccionar elementos de entrada que tengan un atributo de tipo de texto?

¿Alternativamente esto es posible usando completamente CSS?

Si estos dos métodos no son posibles, supongo que tendré que agregar manualmente la clase a cada cuadro de texto que haga.

Fuente

2010-05-14 4imble

yo sepa que es:

$('input[type=text]').addClass('textbox');

y se puede hacer similar en el archivo CSS, pero que requiere una versión más alta de CSS/función de la amplitud desea estar con navegadores antiguos.

Consulte los selectores de atributos en here. Tenga en cuenta que:

"Compatibilidad del navegador: El único navegador que no admite selectores de atributos CSS3 es IE6 Ambos navegadores IE7 e IE8, Opera y Webkit- y basados en Gecko hacerlo a través de ellos en su hoja de estilo.. es definitivamente seguro ".

Fuente

2010-05-14 17:01:16 eglasius

Excelente, muchas gracias. – 4imble

'$ ('input [type = text]')' funcionará en IE6 porque jQuery recurrirá a su propio motor de selección en lugar de a la compatibilidad incorporada del navegador. 'input [type = text] {...}' en una hoja de estilos CSS, por otro lado, fallaría en IE6. – bobince

@bobince la solución canónica sería analizar el HTML con un RegEx supongo –

-1

<!DOCTYPE html> 

<html> 
<head> 

<script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> 
</script> 


<script type="text/javascript"> 
$(document).ready(function(){ 

$(".post_class").css({padding:"10px",background:"#333",color:"#fff"}); 

$("#post_button").css({padding:"10px",background:"#333", textAlign:"center",color:"#fff",cursor:"pointer"}) 

$("#post_button").click(function(){ 
var input = $("input[name='checkListItem']").val(); 

$(".post_class").append('<div class="item">' + input + '</div>'); 

}); 

}); 
</script> 


</head> 

<body> 

<form name="checkListForm"> 

<input type="text" name="checkListItem"/> 

</form> 

<div id="post_button">Post</div> 

<br/> 

<div class="post_class"></div> 

</body> 

</html>

Fuente

2015-12-28 09:48:48

Esto no responde la pregunta en absoluto, entonces ¿por qué se publica esto aquí? – fisk

¿Agregar clase Css a todos los elementos <input type'text '>? Javascript/Css?

Respuesta

Cuestiones relacionadas