Come personalizzare le varie dimensioni di input di twitter bootstrap senza usare! Importante?

Question

Le dimensioni di input di Bootstrap si espandono solo in base alla larghezza, mentre i pulsanti si espandono sia in altezza che in dimensione carattere. (vedi foto) Sto cercando di personalizzare gli ingressi per espandere anche in base all'altezza e alla dimensione del carattere. (Nota: stanno fissare questo per la prossima versione, ma sono troppo impazienti di aspettare)

Finora posso solo raggiungere questo utilizzando il !important hack per ignorare il CSS di input. Voglio evitare di usare !important a tutti i costi, perché è una pratica terribile.

Attualmente, questo è il codice che ho per espandere l'altezza di .input-large. Non funziona quando rimuovo !important. Presumo che ciò sia dovuto al fatto che agli input viene data una priorità più alta rispetto alle classi (che trovo assolutamente sciocco, ma correggimi se sbaglio).

.input-large { 
width: 210px; 
height: 44px !important; 
margin-bottom: 10px !important; 
line-height: 30px !important; 
padding: 11px 19px !important; 
font-size: 17.5px !important; 
} 

C'è un modo per raggiungere questo obiettivo senza rimuovere l'ingresso predefinito styling e non dichiarando !important?

Ecco un violino: http://jsfiddle.net/xryQK/

Answer 1

Invece di usare !important, è possibile utilizzare un attribute selector che ignorare l'impostazione predefinita in quanto sarà più specifico di semplicemente utilizzando un class. Non va bene con il concetto di specificità? Fare riferimento all'articolo this.

Per il calcolo della specificità dei selettori, è possibile utilizzare il sito Web this.

^[1] Utilizzando class[attr=class]

.input-large[class="input-large"] { 
    width: 400px; 
} 

O

^[2] Utilizzando tag[attr=class]

input[class="input-large"] { 
    width: 400px; 
} 

E usando !important non è una pratica terribile se lo si utilizza in il posto giusto.

---

noti che sopra selettori, ^[1] farà tutti gli elementiwidth a 400px avente una class di input-large e in caso di selettore ^[2], imposterà width a 400px per tutti gli input elementi con class di input-large, quindi se si desidera, è possibile chiamare più classi su .class.class suTage utilizzare il selettore qui sotto.

.input-large.input-large-altered { 
    width: 400px; 
} 

Quindi questo selezionerà qualsiasi elemento avente entrambe queste classi set, se si vuole essere più specifico, e si desidera impostare solo per input type="text" di quanto si può sempre scrivere anche un selettore più specifico come

input[type="text"].input-large.input-large-altered { 
    width: 400px; 
} 

Quindi quello superiore sarà solo bersaglio input elemento la cui type attributo è in possesso di un value di textAND avendo entrambi le classi cioè .input-large.input-large-altered

Demo

Demo 2

Demo 3 (classi multiple)

Answer 2

per quanto ne so che hai appena messo il proprio CSS personalizzato dopo

l'esempio del bootstrap:

... Some codes here ... 

<link type="text/css" rel="stylesheet" href="bootstrap.css"> 
<style> 
.input-large { 
    width: 210px; 
    height: 44px; 
    margin-bottom: 10px; 
    line-height: 30px; 
    padding: 11px 19px; 
    font-size: 17.5px; 
} 
</style> 

... another code ... 

Siamo spiacenti, ho dimenticato di cancellare il !important Il !important non è necessaria

Answer 3

se stai lavorando fuori del bootstrap .less file

una soluzione facile sarebbe quella di aggiungere una voce extra come :

.form-fatter { 
    // Set font for forms 
    label, 
    input, 
    button, 
    select, 
    textarea { 
    // Increase the default with 20% 
    #font > .shorthand(@baseFontSize*1.2,normal,@baseLineHeight*1.2); 
    } 
} 

nel tuo html

<form class="form-horizontal form-fatter"> 
... 
</form>