CSS: Pole tekstowe do wypełnienia kontenera nadrzędnego

Question

Próbuję pozwolić, aby <input type="text"> (odtąd określany jako "pole tekstowe") wypełnił kontener nadrzędny za pomocą ustawień: width do 100%. Działa to dopóki nie nadam polu tekstowemu wypełnienia. Zostanie to dodane do szerokości zawartości i przepełnienia pola wejściowego. Zauważ, że w Firefoksie dzieje się tak tylko przy renderowaniu treści jako zgodnych ze standardami. W trybie dziwactwa wydaje się, że zastosowanie ma inny model pudełkowy.

Oto minimalny kod odtwarzający zachowanie we wszystkich nowoczesnych przeglądarkach.

#x { 
 
    background: salmon; 
 
    padding: 1em; 
 
} 
 

 
#y, input { 
 
    background: red; 
 
    padding: 0 20px; 
 
    width: 100%; 
 
}

<div id="x"> 
 
    <div id="y">x</div> 
 
    <input type="text"/> 
 
</div>

moje pytanie: Jak uzyskać pole tekstowe, aby pasował do kontenera?

Wskazówka: dla <div id="y">, to jest bardzo proste: wystarczy ustawić width: auto. Jeśli jednak spróbuję zrobić to dla pola tekstowego, efekt jest inny, a pole tekstowe przyjmuje domyślną liczbę wierszy jako szerokość (nawet jeśli ustawię display: block dla pola tekstowego).

/EDYCJA: "Rozwiązanie" Davida oczywiście działałoby. Nie chcę jednak modyfikować kodu HTML - szczególnie nie chcę dodawać fałszywych elementów bez semantycznej funkcjonalności. Jest to typowy przypadek divitis, którego chcę uniknąć za wszelką cenę. To może być tylko hakowanie w ostateczności.

Answer 1

można otoczyć tekstowe z <div> i dać ten <div>padding: 0 20px. Twoim problemem jest to, że szerokość 100% nie zawiera żadnych wartości wypełnienia lub marginesów; te wartości są dodawane na szczycie 100% szerokości, a więc przelewu.

Answer 2

Wierzę, że można przeciwdziałać przepełnieniu z marginesem ujemnym. tj

margin: -1em; 

Answer 3

Takie zachowanie jest spowodowane różnymi interpretacjami modelu pudełkowego. Prawidłowy model pola stwierdza, że ​​szerokość dotyczy tylko zawartości i dopełnienia oraz dodania do niego marginesu. Więc otrzymujesz 100% plus 20 pikseli prawy i lewy padding równy 100% + 40 pikseli jako całkowita szerokość. Oryginalny model skrzynek IE, znany również jako tryb dziwactwa, zawiera dopełnienie i margines na szerokości. Tak więc szerokość twojej treści będzie w tym przypadku 100% - 40px. Dlatego widzisz dwa różne zachowania. Z tego, co wiem, nie ma na to rozwiązania, ale jest praca nad ustawieniem szerokości 98%, a dopełnieniem 1% z każdej strony.

Answer 4

@Domenic to nie działa. width auto nie wykonuje nic więcej niż domyślne zachowanie tego elementu, ponieważ początkowa wartość szerokości jest automatyczna (patrz strona 164, Cascading Style Sheets Level 2 Revision 1 Specification). Przypisanie wyświetlania bloku typu również nie działa, po prostu informuje przeglądarkę, aby używała pola bloku podczas wyświetlania elementu i nie przypisuje domyślnego zachowania polegającego na zabraniu jak największej przestrzeni, jak to robią div (patrz strona 121, Styl kaskadowy Arkusze Poziom 2, wersja 1 Specyfikacja). Takie zachowanie jest obsługiwane przez wizualny agent użytkownika, a nie przez CSS lub definicję HTML.

Answer 5

Z powodu sposobu zdefiniowania i zaimplementowania Box-Modell nie sądzę, że istnieje rozwiązanie tylko css dla tego problemu. (Oprócz tego, co opisałem: Matthew: użycie procentowego wypełnienia, np. Szerokość: 94%, dopełnienie: 0 3%;)

Można jednak zbudować kod JavaScript, aby obliczyć szerokość dynmicznie przy ładowaniu strony. ..hm, i ta wartość będzie oczywiście również wymagać aktualizacji za każdym razem, gdy zmieni się rozmiar okna Browserwindow.

Ciekawe ubocznym niektórych testów zrobiłem: Firefox robi ustawić szerokość pola wejściowego do 100%, jeżeli dodatkowo width: 100%; także ustawić max-width na 100%. Nie działa to jednak w Operze 9.5 lub IE 7 (nie testowałem starszych wersji).

Answer 6

Nie jest to niemożliwe przy użyciu czystego CSS; Modyfikacje HTML lub JavaScript są niezbędne w przypadku dowolnego nietrywialnego, elastycznego, ale ograniczonego działania interfejsu użytkownika. Kolumny CSS3 nieco w tym zakresie pomogą, ale nie w scenariuszach takich jak twój.

Rozwiązanie Davida jest najczystsze. Tak naprawdę nie jest to przypadek divitis - nie dodajecie niepotrzebnie paczki div lub nadajecie im takie nazwy, jak "p" i "h1". Służy on do określonego celu, a miłą rzeczą w tym przypadku jest to, że jest to również rozszerzalne rozwiązanie - np. możesz w dowolnym momencie dodać zaokrąglone rogi, nie dodając nic więcej. Nie ma to również wpływu na dostępność, ponieważ są to puste elementy div.

FWIW, oto jak zaimplementować wszystkie moje pola tekstowego:

<div class="textbox" id="username"> 
    <div class="before"></div> 
    <div class="during"> 
     <input type="text" value="" /> 
    </div> 
    <div class="after"></div> 
</div> 

jesteś wtedy swobodnie użyć CSS, aby dodać zaokrąglone narożniki, dodać dopełnienie jak w twoim przypadku, etc., ale również don” Trzeba - możesz całkowicie ukryć te boczne divy i mieć tylko zwykłe pole tekstowe.

Inne rozwiązania to używać tabel, np. Amazon używa tabel w celu uzyskania elastycznego, ale ograniczonego układu lub do używania JavaScriptu w celu dostosowania rozmiarów i aktualizacji ich rozmiarów okna, np. Dokumenty Google, Mapy itp. To wszystko.

W każdym razie, moje dwa centy: nie pozwól, aby idealizm stanął na drodze do praktyczności w takich przypadkach. :) Rozwiązanie Davida działa i prawie wcale nie zamienia HTMLa (i tak naprawdę użycie semantycznych nazw klasowych, takich jak "przed" i "po" jest nadal bardzo czyste imo).

Answer 7

Domyślna dopełnienie i obramowanie będzie zapobiec tekstowe z naprawdę w 100%, więc najpierw trzeba je ustawić na 0:

input { 
    background: red; 
    padding: 0; 
    width: 100%; 
    border: 0; //use 0 instead of "none" for ie7 
} 

Następnie umieścić swoje granice i wszelkie wyściółkę lub margines chcesz w div wokół pola tekstowego:

.text-box { 
    padding: 0 20px; 
    border: solid 1px #000000; 
} 

<body> 
    <div id="x"> 
     <div id="y">x</div> 
     <div class="text-box"><input type="text"/></div> 
    </div> 
</body> 

ta powinna umożliwić tekstowe być elastyczne i dokładna wielkość chcesz bez javascript.

Answer 8

Dzięki CSS3 możesz użyć właściwości box-sizing na swoich wejściach do standaryzacji swoich modeli pudełek. Coś takiego by umożliwić Ci dodać dopełnienie i mieć 100% szerokość:

input[type="text"] { 
    -webkit-box-sizing: border-box; // Safari/Chrome, other WebKit 
    -moz-box-sizing: border-box; // Firefox, other Gecko 
    box-sizing: border-box;   // Opera/IE 8+ 
} 

Niestety to nie będzie działać dla IE6/7, ale reszta jest w porządku (Compatibility List), więc jeśli trzeba wspierać tych przeglądarek twoim najlepszym rozwiązaniem byłoby rozwiązanie Davidsa.

Jeśli chcesz przeczytać więcej, sprawdź, this brilliant article by Chris Coyier.

Mam nadzieję, że to pomoże!