Text und Auswahlfelder in CSS auf die gleiche Breite ausrichten?

81

Ok, das scheint unmöglich unmöglich zu sein. Ich habe ein Textfeld und ein Auswahlfeld. Ich möchte, dass sie genau die gleiche Breite haben, damit sie am linken und am rechten Rand ausgerichtet sind.

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            input, select {
                width: 200px;
            }
        </style>
    </head>
    <body>
        <input type="text" value="ABC"><br>
        <select>
            <option>123</option>
        </select>
    </body>
</html>

Das würdest du denken, oder? Nee. Das Auswahlfeld ist in Firefox 6 Pixel kürzer. Siehe Screenshot.Screenshot in Firefox

Ok, also lassen Sie uns den Code bearbeiten und zwei Stile erstellen.

<style type="text/css">
    input {
        width: 200px;
    }
    select {
        width: 206px;
    }
</style>

Ok das funktioniert!

In Firefox behoben

Oh warte, besser in Chrome testen ...

Chrom-Screenshot

FFFFFFFUUUUUUUUUUUU

Kann mir jemand sagen, wie ich diese in allen Browsern ausrichten soll? Warum kann ich nicht einfach width: 200px auf allen machen, warum zeigen alle Browser es anders an? Auch wenn wir gerade dabei sind, warum sind das Textfeld und das Auswahlfeld unterschiedlich hoch? Wie bringen wir sie auf die gleiche Höhe? Habe versucht, Höhe und Linienhöhe ohne Erfolg.

Lösung:

Ok, ich habe die Lösung mit Hilfe der folgenden Antworten gefunden. Der Schlüssel besteht darin, die Eigenschaft box-sizing: border-box zu verwenden , wenn Sie die Breite angeben, die den Rand und den Abstand enthält. Siehe ausgezeichnete Erklärung hier . Dann kann der Browser es nicht stopfen.

Code ist unten, haben auch die Höhe der Felder auf die gleiche Größe eingestellt und den Text innerhalb des Feldes so eingerückt, dass er ausgerichtet ist. Sie müssen auch den Rahmen festlegen, da Chrome einen wirklich seltsam aussehenden Rand hat, der für Auswahlfelder verwendet wird, die die Ausrichtung verwerfen. Dies funktioniert für HTML5-Sites (z. B. Unterstützung von IE9, Firefox, Chrome, Safari, Opera usw.).

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            input, select {
                width: 200px;
                border: 1px solid #000;
                padding: 0;
                margin: 0;
                height: 22px;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
            }
            input {
                text-indent: 4px;
            }
        </style>
    </head>
    <body>
        <input type="text" value="ABC"><br>
        <select>
            <option>123</option>
            <option>123456789 123123123123</option>
            <option>123456789 123123123123 134213721381212</option>
        </select>
    </body>
</html>

Nur eine letzte Warnung: Sie möchten möglicherweise nicht, dass Eingabeschaltflächen, Kontrollkästchen usw. in diesem Stil enthalten sind. Verwenden Sie daher die Option, um input:not([type='button'])sie nicht auf bestimmte Typen anzuwenden, oder verwenden Sie input[type='text'], input[type='password'], um diejenigen anzugeben, auf die sie angewendet werden sollen.

css html textbox drop-down-menu zuallauz
quelle
3
Wenn Sie diese Präzision benötigen, werden Sie als Webdesigner nicht glücklich sein.
Scott Saunders
2
Ja, CSS macht mich täglich wahnsinnig @Scott. :)
zuallauz
2
Beachten Sie, dass die Boxgröße in lte IE7 nicht unterstützt wird (ca. 3% der Benutzer). Und niemals benutzen: nicht - es wird nicht in lte IE8 unterstützt, das sind 20% der Benutzer :)
Anonym
Box-Sizing funktioniert auf IE8! In all den Jahren habe ich dem <select>
-Stil
Box-Sizing funktioniert
Pierre

Antworten:

7

Dies liegt daran, dass das <input type="text" />Element einen geringfügig anderen Standardstil als das <select>Element hat, z. B. können die Werte für Rand, Abstand und Rand unterschiedlich sein.

Sie können diese Standardstile über einen Elementinspektor wie Firebug für Firefox oder den integrierten für Chrome beobachten. Darüber hinaus unterscheiden sich diese Standard-Stylesheets von Browser zu Browser.

Sie haben zwei Möglichkeiten:

  1. Stellen Sie die Werte für Rand, Abstand und Rand explizit so ein, dass sie für beide Elemente gleich sind
  2. Ein CSS-Reset-Stylesheet, das vor Ihren eigenen CSS-Stylesheets eingefügt werden soll

Ich würde mich für Option 1 entscheiden, da Option 2 viel Arbeit erfordert und Sie am Ende jede Menge unnötiges CSS haben. Einige Webentwickler ziehen es jedoch vor, bei Null anzufangen und die vollständige Kontrolle zu haben.

Chris Cannon
quelle
2
Das Zurücksetzen von CSS ist in einem solchen Fall keine schlechte Idee.
Remy
1
Es gibt zwar leichte CSS-Resets, aber natürlich können unerwünschte Nebenwirkungen auftreten. Wenn Sie mit dem Entwerfen eines CSS-Reset-Stylesheets beginnen, wird diese Option viel attraktiver.
Thomas Upton
Ich habe versucht, eine explizite Einstellung vorzunehmen, bei padding:0; margin:0; border:1px solid #000;der die Breite der Text- / Auswahlfelder gut ausgerichtet ist. Wenn Sie sich jedoch den Text in den beiden Feldern ansehen, werden Sie feststellen, dass der Text im Auswahlfeld weiter aufgefüllt ist. Fast muss input { padding-left: 5px; }nach dem ersten zu fixierenden Stil ein weiterer spezifischer Stil hinzugefügt werden . Irgendwelche Ideen? Ich habe auf der Site, die ich erstellt habe, einen CSS-Reset verwendet, bevor ich diesen grundlegenden Testcode erstellt habe, aber das Problem war dort immer noch vorhanden. Der CSS-Reset hat dieses Problem mit der Breite des Textes / Auswahlfelds anscheinend nicht behoben.
zuallauz
1
Versuchen Sie input {text-indent: 5px;}PS PS, das <select>Tag ist sehr starr und betriebssystemspezifisch - es wird viel CSS ignorieren.
Chris Cannon
Ja, der Texteinzug funktioniert, wenn Sie diesen zusätzlichen Stil hinzufügen ... aber nur für einen Browser. Dann wird in Chrome eine andere Menge eingerückt, also um 2-3 weitere Pixel! Müssen Sie möglicherweise die Einrückungen für die Auswahl und den Text irgendwie zurücksetzen?
zuallauz
3

Dies bringt Sie in die Nähe, aber dieses Maß an Präzision ist nahezu unmöglich.

<div style="width: 200px"><input type="text" style="width: 100%; margin: 0; padding: 0" /></div>
<div style="width: 200px">
    <select id="Select1" style="width: 100%; margin: 0; padding: 0">
        <option>1</option>
    </select>
</div>
saluce
quelle
3

Unterschiedliche Browser wenden standardmäßig unterschiedliche Stile an. Ich habe festgestellt, dass durch das Zurücksetzen von Rand und Abstand auf 0 beide Elemente in Firefox und Chrome gleich breit sind.

<html>
    <head>
        <title>Test</title>
        <style type="text/css">
            input, select {
                margin: 0;
                padding: 0;
                width: 200px;
            }
        </style>
    </head>
    <body>
        <input type="text" value="ABC"><br />
        <select>
            <option>123</option>
        </select>
    </body>
</html>

Ich persönlich verwende gerne ein minimales CSS-Reset-Stylesheet wie YUI CSS Reset, bevor ich versuche, ein Design in mehreren Browsern gut aussehen zu lassen.

Thomas Upton
quelle
2
Im IE ist die Auswahl jedoch immer noch einige Pixel kürzer. Also, obwohl es keine perfekte Lösung gibt, können wir ziemlich nahe kommen =)
saluce
1
Ah, IE. Es scheint fast so, als würde es Spaß machen, einzigartig zu sein. Ich habe keine IE-Version zum Testen, aber unterscheidet sie sich auch in späteren Versionen wie 9 oder 10?
Thomas Upton
1
Ich habe mit IE9 getestet und es hatte immer noch einen 2px Unterschied in der Breite.
Saluce
Wenn Sie sich den Text in den beiden Feldern ansehen, werden Sie feststellen, dass der Text im Auswahlfeld weiter aufgefüllt ist. Fast müssen eine bestimmte hinzufügen input { padding-left: 5px; }. Ist das der richtige Weg? Ich habe auf der Site, die ich erstellt habe, einen CSS-Reset verwendet, bevor ich diesen grundlegenden Testcode erstellt habe, aber das Problem war dort immer noch vorhanden. Durch das Zurücksetzen des CSS wurde dieses Problem mit der Breite des Textes / der Auswahlbox nicht behoben.
zuallauz
1
Wenn ich der Eingabe einen linken Abstand gebe, würde ich versuchen, den Text in diesen beiden Elementen auszurichten, wenn dies erforderlich wäre. Vergessen Sie nicht, dass diese Elemente in verschiedenen Betriebssystemen unterschiedlich aussehen. Ich bin mir nicht sicher, ob es sich lohnt, den Text inputund die selectElemente in eine Reihe zu bringen. Die äußeren Kanten dieser Elemente in eine Linie zu bringen, sieht ästhetisch ziemlich gut aus.
Thomas Upton
2

Fügen Sie den fraglichen Auswahl- und Eingabe-Tags eine Klasse hinzu, z.

<input class='custom-input'/>
<select class='custom-input'></select>

Ändern Sie dann das folgende CSS, um es an Ihr Design anzupassen:

.custom-input {
        width:140px;
        border:1px solid #ccc;
        margin:1px;
        padding:3px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -ms-box-sizing:content-box;
        -moz-box-sizing:content-box;
        -webkit-box-sizing:content-box;
        box-sizing:content-box;
    }

obvs dies ist ein Fix für die Unterstützung von Browsern

Matt Jameson
quelle
0

Wenn Sie die Eingänge von Tabelle 4 verwenden, können Sie die folgende Lösung verwenden - auch kompatibel mit ie7:

<tr style="width:1px;"><td style="width:inherit;position:relative;">
    <select style="width:100%;"> 
    </select> 
</td></tr>
<tr><td>
    <input type="text" style="width:150px;"/>
</td></tr>

Auf diese Weise wird die Tabellenzellenbreite auf die Breite der Eingabe festgelegt.

Auf diese Weise würde die Auswahl daher immer die verbleibende Breite einnehmen und perfekt mit der Eingabe d übereinstimmen.

Anonym
quelle
Das ist viel zusätzlicher HTML-Code. Dies ist ein CSS-Problem mit einer CSS-Lösung.
GlennG
0

Versuchen Sie, die Standardränder von beiden Elementen zu entfernen:

select, input {
 border:0;
}
dotNET Lady
quelle
0

Ja, sehr frustrierend. Ich hatte jedoch nie Probleme damit, bis ich ein "<! DOCTYPE html>" - Tag oben auf meiner HTML-Seite platzierte. Meine Webseite wurde auf allen Plattformen, die ich testen konnte, ordnungsgemäß gerendert, bis ich dieses Tag oben in mein Dokument eingefügt habe.

Während dies "echte Spezifikation" ist, scheint es die Ursache für diese Ausrichtungsprobleme zu sein. FWIW, ich verwende HTML5-Elemente, Inline-CSS usw., alle ohne dieses Tag, um HTML5 anzugeben. YMMV.

Sid Lori
quelle