2013-08-06 13 views
13

ho qualche tipo di ingresso ha questa impostazione SCSS (dal quadro)SCSS selettore/CSS per selezionare tutti i tipi di ingresso

textarea, 
input[type="text"], 
input[type="password"], 
input[type="datetime"], 
... 
input[type="date"], 
input[type="month"], 
input[type="time"], 
input[type="week"], 
{ 
    @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); 
} 

Mi piace ignorare/resettare tutto, qualcosa di simile

textarea, 
input[type="*"], 
{ 
    @include box-shadow(none); 
} 

sopra non funziona, anche

textarea, 
    input, 
    { 
     @include box-shadow(none); 
    } 

non abbastanza specifico. C'è un modo per farlo elencando tutti i possibili tipi.

Grazie.

+0

cosa esattamente non è abbastanza specifico su 'input' senza un qualificatore di tipo? Tutti i campi di input hanno un tipo; se manca, per impostazione predefinita 'text'. – Spudley

+0

possibile duplicato di [SASS: Crea mixin per campi di input] (http://stackoverflow.com/questions/13180807/sass-create-mixin-for-input-fields) – cimmanon

+0

Correlati: http://stackoverflow.com/questions/17369600/using-scss-sass-mixin-to-return-a-string-value – cimmanon

risposta

24

Ci sono molti tipi di input possibili. Se si desidera textareas e qualsiasi input che ha un tipo di attributo poi ...

textarea, 
input[type] { 
    ... 
} 

Se si desidera escludere alcuni tipi di ingresso quindi utilizzare il selettore :not. EDIT ESEMPIO JSFIDDLEhttp://jsfiddle.net/Pnbb8/

textarea, 
input[type]:not([type=search]):not([type=url]):not([type=hidden]) { 

} 

Ma come ho detto che ci sono probabilmente molto più tipi che si non si vuole che i tipi si vuole, quindi non si può davvero evitare la lista.

Si può sempre usare una classe CSS.

.box-shadowed 
{ 
    @include box-shadow(none); 
} 
+1

Non si può usare ': not()' come quello in CSS - consultare http://stackoverflow.com/questions/10711730/ che cosa è la differenza nel non-selettore-tra-jquery-and-css – BoltClock

+0

@BoltClock - Avevi ragione che la mia sintassi era sbagliata, ma ho corretto la sintassi e puoi concatenare no come: [type = type1]): not ([type = type2]) http://jsfiddle.net/Pnbb8/ Provalo nell'ultimo FF o Chrome –

+0

Lo so. Ho detto la stessa cosa nella mia risposta alla domanda collegata. – BoltClock

1

Sarà sufficiente?

input[type="text"] { 
    border: 1px red; 
} 

input[type] { 
    border: 1px solid blue; } 
} 

Entrambi hanno la stessa specificità, quindi l'ultimo sostituzioni.

Vedi jsFiddle: http://jsfiddle.net/TheNix/T2BbG/

Un'altra soluzione potrebbe essere quella di ommit l'elemento dal primo selettore. Quest'ultimo avrebbe una specificità più alta - tuttavia, dovresti sapere che in termini di prestazioni, il primo è simile all'utilizzo di un selettore universale (poiché tenta di far corrispondere tutti gli elementi nel DOM, per verificare l'attributo).

[type="text"] { 
    border: 1px red; 
} 

input[type="text"] { 
    border: 1px solid blue; } 
} 
Problemi correlati