HTML5 자리 표시자 CSS 패딩

HTML5 자리 표시자 CSS 패딩

나는 이미 이 게시물을 보았고 내 자리 표시자를 위해 패딩을 바꾸기 위해 내가 할 수 있는 모든 것을 시도했지만, 안타깝게도, 그것은 단지 협력하기를 원하지 않는 것처럼 보입니다.

어쨌든, 여기에 CSS의 코드가 있습니다. (편집: 이것은 sas에서 생성된 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; 

나를 위해 일했습니다 ;)

각진 재료

더하다 에서placeholder한다면padding작동하지 않았지만 권장되는 방법은 아니었습니다.

<input matInput type="text" placeholder="&nbsp;&nbsp;Email">

비각형 재료

더하다padding당신에게input필드, 아래와 같습니다.클릭Run Code Snippet데모 보기

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

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

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

안타깝게도 IE에서 초기 자리 표시자가 올바른 위치에 나타나지 않습니다.그러나 필드를 누른 후 이 필드를 나가면 자리 표시자가 올바른 위치에 나타납니다.

제 해결책은 다음과 같습니다.

line-height:normal;

정line-height: 0px;.

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

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

줄 높이를 제거하면 텍스트가 자리 표시자 텍스트와 정렬되지만 이 결함에 맞게 설계를 조정해야 하므로 문제가 제대로 해결되지 않습니다(버그가 아닙니다).수직 정렬을 추가해도 효과가 없습니다.모든 브라우저에서 시도해 본 것은 아니지만 Safari 5.1.4에서는 확실히 작동하지 않습니다.

크로스 브라우저 자리 표시자 지원(jQuery.placeholder)이 아니라 스타일링 자리 표시자를 위한 jQuery 수정에 대해 들어봤지만 아직 찾지 못했습니다.

그러는 동안 이 페이지의 표에서 다른 스타일에 대한 다른 브라우저 지원을 확인할 수 있습니다.

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

줄 높이 제거 또는 패딩을 사용하여 설정... 모든 브라우저에서 작동 중

당신의 스크린샷을 배경 이미지로 사용하여 여분의 마크업을 제거하는 피들을 만들었는데, 잘 작동하는 것 같습니다.

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

이것이 당신에게 효과가 있습니까?만약 그렇지 않다면, 당신의 정확한 마크업과 CSS로 피들을 업데이트할 수 있습니까?

OS x에서 크롬을 최신 안정판(9.0.597.94)으로 업데이트하는 순간 이 문제를 발견했기 때문에 이것은 크롬 버그이며 해결되기를 바랍니다.

저는 이 문제를 해결하려는 시도조차 하지 않고 그저 해결책을 기다리고 싶습니다.그것은 단지 그것을 꺼내는 일이 더 많다는 것을 의미할 뿐입니다.

는 자리표다영받않지습다니향을에 을 받지 .line-height그리고.padding브라우저에서 일치하지 않습니다.

하지만 저는 다른 해결책을 찾았습니다.

VERTICAL-ALIGN이것이 아마도 유일하게 작동하는 시간이지만 대신 그것을 시도하고 많은 줄의 CSS 코드를 제거합니다.

저는 존 캐터펠드의 블로그에서 이것에 대한 저의 좌절감을 해결해주는 답을 찾았습니다.

Chrome(v20-30)은 거의 모든 스타일을 구현하지만 중요한 주의 사항이 있습니다. 자리 표시자 스타일은 입력 상자의 크기를 조정하지 않으므로 줄 높이와 패딩 상단 또는 하단과 같은 것을 멀리해야 합니다.

줄 높이 또는 패딩을 사용하는 경우 자리 표시자가 표시되지 않습니다.저는 지금까지 그것을 피할 방법을 찾지 못했습니다.

언급URL : https://stackoverflow.com/questions/4919680/html5-placeholder-css-padding