Wyściółka w przerwach wejściowych Szerokość 100%

Nie wiem, jak jest kompatybilny z przeglądarkami (działa w Firefoksie i safari), ale można spróbować tego rozwiązania:

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

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

Jedną z opcji jest zawinięcie INPUT w DIV, która ma wyściółkę.

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>

Mam problemy z czymś podobnym. Mam tds z wejściami 100% i małą wyściółką. To co zrobiłem to wyrównałem padding 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%;
}

Wypełnienie 8px w celu uwzględnienia obramowania i wypełnienia obszaru wejściowego / textarea. Mam nadzieję, że to pomoże!

Często zapomnianicalc mogą przyjść na ratunek tutaj:

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

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

Może zdjąć obramowanie + tło z input, a zamiast tego zamknąć je w div z obramowaniem + tło i szerokością:100% i ustawić margines na input?

Jednym z rozwiązań, które znalazłem, jest absolutnie pozycjonowanie wejścia za pomocą stosunkowo umieszczonego znacznika 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 absolutnie umieszczone dzieci nie zwiększą jego wysokości. Pozwala to uniknąć konieczności ustawiania width: 100% poprzez zablokowanie go po lewej i prawej stronie elementu nadrzędnego.

Spróbuj użyć procentów 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 w starych przeglądarkach, 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, są szanse, że 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 pewne problemy ze zgodnością.