Wypełnienie CSS dla symboli zastępczych HTML5

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:

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)

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

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;
}

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;
}

line-height: normal; 

pracował dla mnie;)

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.

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;

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

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?

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.

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.

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

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.

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" />

Przetestowałem prawie wszystkie metody podane na tej stronie dla mojej aplikacji Angular. Tylko ja znalazłem rozwiązanie poprzez  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>