2013-03-14 6 views
8

Sagen wir, ich einen Standard-Texteingabe haben ohne CSSohne Änderung ist es Höhe

<input type="text" /> 

Ich will es Grenze verfärben rot so füge ich einen Stil

<input type="text" style="border-color:red" /> 

Danach ist der Rand rot, aber die Größe ist 2px. Wenn ich die Grenze auf 1px ändere, ist die Höhe der Eingabe kleiner als die Standardeingabe.

Wie kann ich meinen Rahmen auf 1px ändern und sicherstellen, dass die tatsächliche Höhe der Eingabe (einschließlich der Umrandung) der Standardhöhe entspricht?

+0

Hinzufügen eines Füllzeichens? – cHao

+0

@cHao Ja, es wird funktionieren. Aber das Problem ist, dass ich nicht sicher bin, ob die Eingabe-2px-Rahmenbreite in allen Browsern gleich ist. – user937450

+0

Entscheiden Sie also, was Sie wollen *, um in allen Browsern gleich zu sein, und stellen Sie es ein. :) Es gibt einen Grund, warum in vielen Fällen die ersten Regeln, die Leute schreiben (oder einschließen), Stile in einen bekannten, konsistenten Zustand "zurücksetzen". – cHao

Antwort

4

Versuchen Sie, diese

<input type="text"/> 

Es wird in allen Cross-Browser wie mozilla, Chrome und Internet Explorer gleichen anzuzeigen.

<style> 
    input{ 
     border:2px solid #FF0000; 
    } 
</style> 

Dont Stil Inline hinzugefügt werden, da es nicht gute Praxis, verwendet Klassenstil für Ihr Eingabefeld hinzuzufügen.

+2

Liebe, wie du sagst "versuch das ... ** Tu das nicht **". Man könnte vorschlagen, wenn Sie das Gefühl haben, dass es eine schlechte Übung ist, demonstrieren Sie es nicht. Vor allem in Antworten werden die Leute abstimmen. :) – cHao

+0

mit chao vereinbart –

+0

Inline-Stile sind die Zukunft http://formidabilelabs.com/blog/2015/03/01/launching-radium/ – ooolala

19

Verwendung dieses, wird es nicht Höhe bewirken:

<input type="text" style="border:1px solid #ff0000" /> 
1

Stellen Sie eine transparente Grenze und dann ändern:

.default{ 
border: 2px solid transparent; 
} 

.new{ 
border: 2px solid red; 
} 
1

Diese CSS-Lösung für mich gearbeitet:

input:active, 
input:focus { 
    border: 1px solid #red 
} 

input:active, 
input:focus { 
    padding: 2px solid #red /*for firefox and chrome*/ 
} 

/* .ie is a class you would need to set at the html root level */ 
.ie input:active, 
.ie input:focus { 
    padding: 3px solid #red /* IE needs 1px extra padding*/ 
} 

Ich verstehe, dass es auf FF und Chrome nicht notwendig ist, aber IE braucht es. Und es gibt Umstände, in denen du es brauchst.

0

Ist das wonach Sie suchen?

$("input.address_field").on('click', function(){ 
    $(this).css('border', '2px solid red'); 
}); 
Verwandte Themen