HTML5 자리 표시 자 CSS 패딩

이 게시물을 이미 보았고 자리 표시 자의 패딩을 변경하기 위해 할 수있는 모든 것을 시도했지만 슬프게도 협력하고 싶지 않은 것 같습니다.

어쨌든, 여기 CSS 코드가 있습니다. ( 편집 : 이것은 sass에서 생성 된 CSS입니다)

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

다음은 간단한 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>

꽤 간단합니까? 자리 표시자가 어떤 이유로 꺼져 있지만 입력 필드에 입력하려고하면 텍스트가 정렬됩니다. webkit자리 표시 자의 색상 만 변경할 수있는 것처럼 보이지만 포함 입력의 패딩을 편집하려고하면 입력 디자인이 손상됩니다! 머리카락을 뽑다

다음은 자리 표시 자와 텍스트 입력이있는 입력 필드의 화면입니다.

편집 :

지금은이 jquery 플러그인에 의지했습니다 .

즉시 사용할 수 있으며 크롬 문제를 해결합니다. 그래도 문제가 무엇인지 알아 내고 싶습니다 (내 크롬과 관련이있는 경우)

John Catterfeld가 문제없이 그것을 재현했기 때문에 그것이 스타일이 아니라고 확신합니다. 그래서 누군가가 왜 이것이 나에게 일어나는지에 대한 올바른 방향을 지적 할 수 있기를 바랍니다 (고객의 크롬도 마찬가지입니다) John이 Windows를 사용하는 경우 Chrome / OSX에 고유 한 것일 수 있습니다.)

나는 같은 문제를 겪었다.

입력에서 선 높이를 제거하여 수정했습니다. 문제를 일으키는 선 높이가 있는지 확인하십시오.

비슷한 문제가 있었고 내 문제는 측면 패딩과 관련이 있었고 해결책은 텍스트 들여 쓰기였습니다. 텍스트 들여 쓰기가 자리 표시 자 측면 위치에 영향을 미친다는 것을 알지 못했습니다.

input{
  text-indent: 10px;
}

행 높이를 유지하고 자리 표시자가 동일하게 유지되도록하려면 최신 브라우저 버전부터 자리 표시 자 CSS를 직접 편집 할 수 있습니다. 그것은 나를 위해 속임수를했다 :

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; 

나를 위해 일했다.)

실제로 줄 높이를 제거하면 텍스트가 자리 표시 자 텍스트와 정렬되지만 디자인을이 결함에 맞게 수정해야하므로 문제를 제대로 해결하지 못합니다 (버그가 아님). 세로 맞춤을 추가해도 거래가 수행되지 않습니다. 모든 브라우저에서 시도한 것은 아니지만 Safari 5.1.4에서는 작동하지 않습니다.

크로스 브라우저 플레이스 홀더 지원 (jQuery.placeholder)이 아니라 jQuery 픽스 플레이스에 대한 jQuery 수정에 대해 들었지만 아직 찾지 못했습니다.

그 동안 이 페이지의 표를 확인 하여 다양한 스타일에 대한 다양한 브라우저 지원을 보여줍니다.

편집 : 플러그인을 찾았습니다! jquery.placeholder.min.js 는 완벽한 스타일링 기능과 크로스 브라우저 지원을 모두 제공합니다.

인터넷 익스플로러에만 나타나는 문제가 있습니다. 입력 필드가 스타일되었습니다

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

불행히도 IE에서는 초기 자리 표시자가 올바른 위치에 있지 않습니다. 그러나 필드를 클릭 하고이 필드를 떠났을 때 자리 표시자가 올바른 위치에 나타났습니다.

내 솔루션은 다음과 같이 설정했습니다.

line-height:normal;

line-height: 0px;Chrome에서 나를 위해 고정 설정

스크린 샷을 배경 이미지로 사용하고 추가 마크 업을 제거하여 바이올린을 만들었는데 정상적으로 작동하는 것 같습니다.

http://jsfiddle.net/fLdQG/2/ (웹킷 브라우저 필요)

이것이 당신을 위해 작동합니까? 그렇지 않은 경우 정확한 마크 업 및 CSS로 바이올린을 업데이트 할 수 있습니까?

OS x에서 Chrome을 최신 안정 버전 (9.0.597.94)으로 업데이트하는 순간 문제를 발견하여 Chrome 버그이므로 수정 될 것입니다.

나는이 문제를 해결하려고 시도조차하지 않고 단지 수정을 기다립니다. 더 많은 작업을 수행해야한다는 의미 일뿐입니다.

자리 표시 자에 의해 영향을받지 않습니다 line-height및 padding브라우저에 일치하지 않습니다.

그래도 다른 해결책을 찾았습니다.

VERTICAL-ALIGN. 아마도 이것이 작동하는 유일한 시간 일 것입니다. 대신 시도하고 많은 CSS 코드 줄을 찾으십시오.

줄 높이를 제거하거나 패딩을 사용하여 설정하십시오 ... 모든 브라우저에서 작동합니다

John Catterfeld의 블로그 에서 이에 대한 나의 불만을 해결 한 답을 찾았습니다 .

... Chrome (v20-30)은 거의 모든 스타일을 구현하지만 주요 경고 사항이 있습니다. 자리 표시 자 스타일은 입력 상자의 크기를 조정하지 않으므로 줄 높이 및 패딩 위 또는 아래와 같은 항목을 피하십시오.

행 높이 또는 패딩을 사용하는 경우 결과 자리 표시 자와 함께 좌절됩니다. 나는 지금까지 그 방법을 찾지 못했습니다.

자리 표시 자 텍스트를 오른쪽으로 이동하고 빈 공간에 커서를 두려면 자리 표시 자 특성의 시작 부분에 공백을 추가해야합니다.

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

이 페이지에서 여기에 주어진 거의 모든 방법을 Angular 앱에 대해 테스트했습니다.  공백을 삽입하는 솔루션을 찾았습니다.

앵귤러 재질

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

비각도 재질

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