Wypełnienie CSS dla symboli zastępczych HTML5


133

Widziałem już ten post i próbowałem wszystkiego, co mogłem, aby zmienić wypełnienie dla mojego elementu zastępczego, ale niestety wygląda na to, że po prostu nie chce współpracować.

Tak czy inaczej, oto kod dla css. ( EDYCJA : to jest wygenerowany css z sass)

#search {
  margin-top: 1px;
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  width: 220px;
}

#search form {
  position: relative;
}

#search input {
  padding: 0 10px 0 29px;
  color: #555555;
  border: none;
  background: url('/images/bg_searchbar.png?1296191141') no-repeat;
  width: 180px;
  height: 29px;
  overflow: hidden;
}

#search input:hover {
  color: #00ccff;
  background-position: 0px -32px;
}

A oto prosty kod HTML:

<div id="search">
  <form>
    <input type="text" value="" placeholder="Search..." name="q" autocomplete="off" class="">
  </form>
  <div id="jquery-live-search" style="display: block; position: absolute; top: 15px; width: 219px;">
    <ul id="search-results" class="dropdown">
    </ul>
  </div>
</div>

Dość proste? symbol zastępczy jest z jakiegoś powodu wyłączony, ale kiedy próbujesz wpisać w polu wejściowym, tekst jest wyrównany. Wygląda na to, że możesz zmienić tylko kolor (dla webkit) symbolu zastępczego, ale jeśli spróbuję edytować wypełnienie zawierającego dane wejściowe, niszczy to projekt wejścia! wyrywa włosy

Oto ekrany symbolu zastępczego i pola wprowadzania tekstu:

symbol zastępczy Wprowadzanie tekstu

EDYCJA :

Na razie skorzystałem z tej wtyczki jquery .

Działa od razu po wyjęciu z pudełka i rozwiązuje problem z moim chrome. Nadal chciałbym odkryć w czym jest problem (czy ma to coś wspólnego z moim chromem czy coś takiego)

Jestem prawie pewien, że to nie style od czasu, gdy John Catterfeld odtworzył go bez żadnych problemów, więc mam nadzieję, że ktoś tam może wskazać mi właściwy kierunek, dlaczego tak się dzieje ze mną (również chrom mojego klienta. jest to prawdopodobnie natywne dla Chrome / OSX, jeśli Jan używa Windows)


2
Czy możesz podać wygenerowany CSS? Byłoby to znacznie łatwiejsze w obsłudze niż źródło SASS.
RoToRa

+1 Ta wtyczka jest niesamowita - prosta i ma odpowiednie opcje, których potrzebuję. Prawdopodobnie najlepsze rozwiązanie zastępcze, na jakie się natknąłem do tej pory.
easwee

Jeśli ktoś ma problem z ustawianiem bootstrapu, pomocne są te dwie opcje: font-size: large; zamiast px; i wysokość linii: normalna;
Necker

Odpowiedzi:


229

Mam ten sam problem.

Naprawiłem to, usuwając wysokość linii z mojego wejścia. Sprawdź, czy jest jakaś wysokość linii, która jest przyczyną problemu


6
Źle. W przypadku elementu wejściowego na symbol zastępczy nie wpływa wysokość linii, ale dopełnienie nie jest najlepszym rozwiązaniem. Najlepiej jest użyć (i wiem, że normalnie nigdy nic nie robi, ale w tym przypadku tak) jest właściwość CSS VERTICAL-ALIGN.
RIK

1
Tak, zaskakujące, że to rozwiązało problem. Wpisany tekst nadal pozostaje wyśrodkowany w pionie, nawet bez pomocy dotyczącej wysokości wiersza.
hndcrftd

59
kiedy nie było line-height bezpośrednio na wejściu, a następnie dodając line-height: normal;wystarczyły dla mnie
philfreo

Zresztą trzeba dodać line-height dla IE przeglądarek, ale to wykonać zadanie dla Safari
Kaloyan Stamatov

95

Miałem podobny problem, mój problem był z bocznym dopełnieniem, a rozwiązaniem było wcięcie tekstu, nie zdawałem sobie sprawy, że wcięcie tekstu wpływa na zastępczą pozycję boczną.

input{
  text-indent: 10px;
}

28

Jeśli chcesz zachować wysokość linii i wymusić, aby symbol zastępczy miał taką samą, możesz bezpośrednio edytować zastępczy CSS od nowszych wersji przeglądarek. To mi wystarczyło:

input::-webkit-input-placeholder { /* WebKit browsers */
  line-height: 1.5em;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  line-height: 1.5em;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
  line-height: 1.5em;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
  line-height: 1.5em;
}


2

Usunięcie wysokości linii rzeczywiście sprawia, że ​​tekst jest wyrównany z tekstem zastępczym, ale nie rozwiązuje poprawnie problemu, ponieważ musisz dostosować projekt do tej wady (to nie jest błąd). Dodanie wyrównania w pionie też nie załatwi sprawy. Nie próbowałem we wszystkich przeglądarkach, ale na pewno nie działa w Safari 5.1.4.

Słyszałem o poprawce jQuery do tego, która nie jest obsługą symboli zastępczych w różnych przeglądarkach (jQuery.placeholder), ale do stylizacji symboli zastępczych, ale jeszcze jej nie znalazłem.

W międzyczasie możesz przejść do tabeli na tej stronie, która pokazuje obsługę różnych przeglądarek dla różnych stylów.

Edycja: znaleziono wtyczkę! jquery.placeholder.min.js zapewnia zarówno pełne możliwości stylizacji, jak i obsługę wielu przeglądarek.


próbowałem znaleźć poprawkę inną niż zastępcza, ponieważ korzystałem już z powyższej wtyczki jquery :) dzięki za pomoc!
skorodował

Pamiętaj jednak, że są to dwie różne wtyczki. Nie jestem pewien, co robi ta, której używasz (demo nie działa w żadnej z moich przeglądarek), ale ta używa atrybutu zastępczego elementu i dynamicznie tworzy rozpiętość renderowaną powyżej pola wejściowego, co zapewnia maksymalne możliwości stylizacji.
zykadelic

2

Miałem problem, który pojawia się właśnie w przeglądarce internetowej. Pole wejściowe zostało nazwane stylem

height:38px;
line-height:38px;

Niestety w IE początkowy symbol zastępczy nie pojawia się we właściwej pozycji. Ale kiedy kliknąłem w to pole, a następnie opuściłem to pole, symbol zastępczy pojawił się we właściwej pozycji.

Moim rozwiązaniem było ustawienie:

line-height:normal;

2

Ustawienie line-height: 0px;naprawiło to dla mnie w Chrome


2
Czy możesz wyjaśnić, co to dodaje do przyjętej odpowiedzi sprzed czterech lat?
Nathan Tuggy,

1
@NathanTuggy zaakceptowana odpowiedź sugerowała mi line-heightcałkowite usunięcie atrybutu z elementu. Dla mnie to nic nie dało, a tym, co rozwiązało problem, było ustawienieline-height: 0px
JobJob

To samo tutaj, to właśnie rozwiązało problem.
aeroson

1

Stworzyłem skrzypce, używając twojego zrzutu ekranu jako obrazu tła i usuwając dodatkowy znacznik, i wydaje się, że działa dobrze

http://jsfiddle.net/fLdQG/2/ (wymagana przeglądarka webkit)

Czy to działa dla Ciebie? Jeśli nie, czy możesz zaktualizować skrzypce za pomocą dokładnego oznaczenia i CSS?


hmm sprawdziłem link i u mnie też nie działa. myślisz, że jest to wtyczka / coś w moim Chrome? Zrzut ekranu: grab.by/8OFf
skorodowany

sprawdziłem za pomocą safari i działa. czy chrome i safari nie powinny renderować tego samego?
skorodował

Hmm, nie znam wtyczki, która wpłynęłaby na twój układ w ten sposób, ale Chrome i Safari działają dobrze dla mnie (i tak, powinny renderować to samo).
ajcw,

1
używam 9.0.597.84 (chrome) na mac. którego używasz?
skorodował

Używam Chrome 8.0.552.237 w systemie Windows 7.
ajcw,

1

Zauważyłem ten problem w momencie, gdy zaktualizowałem Chrome na OS X do najnowszej stabilnej wersji (9.0.597.94), więc jest to błąd Chrome i mam nadzieję, że zostanie naprawiony.

Kusi mnie, aby nawet nie próbować tego obejść i po prostu poczekać na poprawkę. Będzie to oznaczało więcej pracy przy wyjmowaniu go.


mmm więc to jest potwierdzone? czy istnieje sposób na „obniżenie wersji” naszego Chrome, aby sprawdzić, czy to naprawdę jest Chrome?
skorodował

1
jest rok 2013 i nadal mam ten problem z najnowszą wersją chrome: Wersja 27.0.1453.116 m
Postscripter

1

Na symbol zastępczy nie ma wpływu line-heighti paddingjest niespójny w przeglądarkach.

Znalazłem jednak inne rozwiązanie.

VERTICAL-ALIGN. To prawdopodobnie jedyny raz, kiedy to działa, ale spróbuj tego i zapisz wiele linii kodu CSS.


2
nic dla mnie nie robi.
Postscripter,

1

Usuń wysokość linii lub ustaw za pomocą dopełnienia ... to działa we wszystkich przeglądarkach


1

Znalazłem odpowiedź, która złagodziła moje frustracje związane z tym na blogu Johna Catterfelda .

... Chrome (v20-30) implementuje prawie wszystkie style, ale z dużym zastrzeżeniem - style zastępcze nie zmieniają rozmiaru pola wprowadzania, więc unikaj takich rzeczy, jak wysokość linii i dopełnienie od góry lub dołu.

Jeśli używasz wysokości linii lub dopełnienia, będziesz sfrustrowany wynikowym symbolem zastępczym. Do tej pory nie znalazłem sposobu na obejście tego.


1

Jeśli chcesz przesunąć tekst zastępczy w prawo i pozostawić kursor w pustym miejscu, musisz dodać spacje na początku atrybutu zastępczego:

<input type="email" placeholder="  Your email" />

1

Przetestowałem prawie wszystkie metody podane na tej stronie dla mojej aplikacji Angular. Tylko ja znalazłem rozwiązanie poprzez &nbsp;wstawianie spacji tj

Materiał kątowy

<input matInput type="text" class="pl-2" placeholder="&nbsp;&nbsp;Email">

Materiał nie kątowy

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container m-3 d-flex flex-column align-items-center justify-content-around" style="height:100px;">
<input type="text" class="pl-0" placeholder="Email with no Padding" style="width:240px;">
<input type="text" class="pl-3" placeholder="Email with 1 rem padding" style="width:240px;">
</div>

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.