html estilos - Selector de CSS para los campos de entrada de texto?




borde sin (9)

¿Cómo puedo dirigir los campos de entrada del tipo 'texto' usando los selectores de CSS?


Answers

Puede usar :text Selector de :text para seleccionar todas las entradas con texto de tipo

Violín de trabajo

$(document).ready(function () {
    $(":text").css({    //or $("input:text")
        'background': 'green',
        'color':'#fff'
    });
});

:text es una extensión de jQuery y no es parte de la especificación de CSS; las consultas que usan: text no pueden aprovechar el aumento de rendimiento proporcionado por el método DOM querySelectorAll () nativo. Para obtener un mejor rendimiento en los navegadores modernos, use [type="text"] lugar. Esto funcionará para IE6+ .

$("[type=text]").css({  // or $("input[type=text]")
    'background': 'green',
    'color':'#fff'
});

CSS

[type=text] // or input[type=text] 
{
    background: green;
}

Tenía un campo de texto de tipo de entrada en un campo de fila de tabla Lo estoy apuntando con código

.admin_table input[type=text]:focus
{
    background-color: #FEE5AC;
}

input[type=text]

o, para restringir a entradas de texto dentro de formularios

form input[type=text]

o, para restringir más a una determinada forma, asumiendo que tiene id myForm

#myForm input[type=text]

Aviso: IE6 no lo admite, por lo tanto, si desea desarrollar para IE6, use IE7.js (como sugirió Yi Jiang) o comience a agregar clases a todas sus entradas de texto.

Referencia: http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

Debido a que se especifica que los valores de atributo predeterminados no siempre pueden seleccionarse con los selectores de atributo, se podría tratar de cubrir otros casos de marcado para los cuales se representan las entradas de texto:

input:not([type]), // type attribute not present in markup
input[type=""], // type attribute present, but empty
input[type=text] // type is explicitly defined as 'text'

Aún así, esto deja el caso cuando el tipo está definido, pero tiene un valor no válido y aún se vuelve a escribir = "texto". Para cubrir eso, podríamos usar seleccionar todas las entradas que no sean uno de los otros tipos conocidos

input:not([type=button]):not([type=password]):not([type=submit])...

Pero este selector sería bastante ridículo y también la lista de posibles tipos está creciendo con nuevas características que se agregan a HTML.

Aviso: la :not pseudo-clase solo es compatible a partir de IE9.


Usualmente uso selectores en mi hoja de estilo principal, luego hago un archivo .js (jquery) específico para ie6 que agrega una clase a todos los tipos de entrada. Ejemplo:

$(document).ready(function(){
  $("input[type='text']").addClass('text');
)};

Y luego simplemente duplique mis estilos en la hoja de estilo específica ie6 usando las clases. De esa manera, el marcado real es un poco más limpio.


Como @Amir publicó más arriba, la mejor manera hoy en día, usar el navegador cruzado y dejar atrás IE6, es utilizar

[type=text] {}

Nadie mencionó una especificidad de CSS más baja ( why is that important ?) Hasta ahora, [type=text] features 0,0,1,0 en lugar de 0,0,1,1 con input[type=text] .

En cuanto al rendimiento, ya no hay ningún impacto negativo.

normalizar v4.0.0 recién lanzado con una especificidad de selector reducida .


Los selectores de atributo se utilizan a menudo para las entradas. Esta es la lista de selectores de atributos:

[título] Se seleccionan todos los elementos con el atributo de título.

[title = banana] Todos los elementos que tienen el valor 'banana' del atributo title.

[title ~ = banana] Todos los elementos que contienen 'banana' en el valor del atributo title.

[title | = banana] Todos los elementos cuyo valor del atributo title comienza con 'banana'.

[title ^ = banana] Todos los elementos cuyo valor del atributo title comienza con 'banana'.

[title $ = banana] Todos los elementos cuyo valor del atributo title termina con 'banana'.

[title * = banana] Todos los elementos cuyo valor del atributo title contiene la subcadena 'banana'.

Referencia: https://kolosek.com/css-selectors/


entrada [tipo = texto]

Esto seleccionará todo el texto de tipo de entrada en una página web.


Con el selector de atributos nos dirigimos a texto de tipo de entrada en CSS

input[type=text] {
background:gold;
font-size:15px;
 }

Solución CSS y jQuery limitada

No estoy seguro de cuán elegante es esta solución, pero corta todo exactamente a la mitad: http://jsfiddle.net/9wxfY/11/

De lo contrario, he creado una buena solución para ti ... Todo lo que necesitas hacer es tener esto para tu HTML:

Eche un vistazo a esta edición más reciente y precisa al 13/6/2016: http://jsfiddle.net/9wxfY/43/

En cuanto al CSS, es muy limitado ... Solo necesita aplicarlo a :nth-child(even)

$(function(){
  var $hc = $('.half-color');
  var str = $hc.text();
  $hc.html("");

  var i = 0;
  var chars;
  var dupText;

  while(i < str.length){
    chars = str[i];
    if(chars == " ") chars = "&nbsp;";
    dupText = "<span>" + chars + "</span>";

    var firstHalf = $(dupText);
    var secondHalf = $(dupText);

    $hc.append(firstHalf)
    $hc.append(secondHalf)

    var width = firstHalf.width()/2;

    firstHalf.width(width);
    secondHalf.css('text-indent', -width);

    i++;
  }
});
.half-color span{
  font-size: 2em;
  display: inline-block;
  overflow: hidden;
}
.half-color span:nth-child(even){
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="half-color">This is a sentence</div>





html css forms css-selectors html-input