Wypełnienie w danych wejściowych łamie szerokość 100%

Ok, więc wiemy, że ustawienie dopełnienia obiektu powoduje zmianę jego szerokości, nawet jeśli jest ustawiona jawnie. Chociaż można argumentować za logiką, która za tym stoi, powoduje to pewne problemy z niektórymi elementami.

W większości przypadków po prostu dodajesz element podrzędny i dodajesz do niego wypełnienie zamiast ustawionego na 100%, ale w przypadku danych wejściowych formularza nie jest to możliwy krok.

Spójrz na to: http://sandman.net/test/formcss.html

Drugie wejście ma wypełnienie ustawione na 5 pikseli, co zdecydowanie wolę od ustawienia domyślnego. Ale niestety powoduje to wzrost wielkości wejściowej o 10 pikseli we wszystkich kierunkach, w tym dodanie 10 pikseli do 100% szerokości.

Problem polega na tym, że nie mogę dodać elementu podrzędnego do danych wejściowych, więc nie mogę tego naprawić. Więc pytanie brzmi:

Czy istnieje sposób na dodanie dopełnienia wewnątrz danych wejściowych, przy jednoczesnym zachowaniu szerokości 100%? Musi to być 100%, ponieważ formularze będą renderować się z różnymi szerokościami rodziców, więc nie znam wcześniej szerokości rodzica.

Używając CSS3, możesz użyć rozmiaru pola właściwości , aby zmienić sposób, w jaki przeglądarka oblicza szerokość wejścia .

  input.input {
    width: 100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
  }

Możesz przeczytać więcej na ten temat tutaj: http://css-tricks.com/box-sizing/

Nie wiem, na ile jest kompatybilny z różnymi przeglądarkami (działa w Firefoksie i Safari), ale możesz wypróbować to rozwiązanie:

DIV.formvalue {
padding: 15px;
}
input.input {
margin: -5px;
}

(Opublikowałem tylko wartości, które zmieniłem)

Jedną z opcji jest owinięcie INPUTw a, DIVktóre ma wypełnienie.

CSS:

div.formvalue {
    background-color: #eee;
    border: 1px solid red;
    padding: 10px;
    margin: 0px;
}

div.paddedInput {
    padding: 5px;
    border: 1px solid black;
    background-color: white;
}

div.paddedInput input {
    border: 0px;
    width: 100%;
}

HTML:

<div class="formvalue">
    <div class="paddedInput"><input type="text" value="Padded!" /></div>
</div>

Tutaj calcna ratunek mogą przyjść zapomniani :

input {
  width: calc(100% - 1em);
  padding: 0.5em;
}

Ponieważ wiemy, że wypełnienie zwiększy szerokość elementu, po prostu odejmujemy wypełnienie od całkowitej szerokości. Jest obsługiwany przez wszystkie główne przeglądarki, jest responsywny i nie wymaga niechlujnych elementów div wrapper.

Mam pewne problemy z czymś podobnym do tego. Mam tds z wejściami 100% i małą wyściółką. To, co zrobiłem, to skompensowanie wypełnienia na TD w następujący sposób:

.form td {
    padding-right:8px;
}

.form input, .form textarea {
    border: 1px solid black;
    padding:3px;
    width:100%;
}

dopełnienie 8 pikseli, aby uwzględnić obramowanie i wypełnienie obszaru wejściowego / tekstowego. Mam nadzieję że to pomoże!

Być może zdejmij obramowanie + tło inputi zamiast tego zamknij je w divramce + tło ​​i szerokość: 100% i ustaw margines na input?

Jednym z rozwiązań, które znalazłem, jest absolutne pozycjonowanie wejścia za pomocą względnie umieszczonego tagu nadrzędnego.

<p class="full-width-input">
    <input type="text" class="text />
</p>

Zastosuj styl:

p.full-width-input {
    position: relative;
    height: 35px;
}

p.full-width-input input.text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 5px;
}

Jedyną rzeczą, o której należy pamiętać, jest to, że znacznik akapitu wymaga ustawienia wysokości, ponieważ jego bezwzględnie ustawione elementy potomne nie zwiększą wysokości. Pozwala to uniknąć konieczności ustawiania width: 100%, blokując go po lewej i prawej stronie elementu nadrzędnego.

Spróbuj użyć wartości procentowych do wypełnienia:

.input { 

  // remove border completely
  border: none;

  // don't forget to use the browser prefixes
  box-shadow: 0 0 0 1px silver;

  // Use PERCENTAGES for at least the horizontal padding
  padding: 5%; 

  // 100% - (2 * 5%)
  width: 90%; 

}

Jeśli martwisz się o użytkowników starszych przeglądarek, którzy nie widzą cienia pola, po prostu nadaj wejściu subtelny kolor tła jako kopię zapasową. Jeśli używasz pikseli do tego rodzaju rzeczy, prawdopodobnie używasz ich gdzie indziej, co może stanowić kilka dodatkowych wyzwań, daj mi znać, jeśli je napotkasz.

Jedyne, co wiem, aby temu zapobiec, to przypisanie takich wartości 100% -10. Ale ma jednak pewne problemy ze zgodnością.