ตัวยึดตำแหน่ง HTML5 css padding

ฉันเห็นโพสต์นี้แล้วและลองทุกอย่างที่ทำได้เพื่อเปลี่ยนช่องว่างภายในสำหรับตัวยึดตำแหน่งของฉัน แต่ดูเหมือนว่าจะไม่ต้องการความร่วมมือ

อย่างไรก็ตามนี่คือรหัสสำหรับ css ( แก้ไข : นี่คือ css ที่สร้างขึ้นจาก 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;
}

และนี่คือ 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นี้แล้ว

ใช้งานได้ทันทีและแก้ไขปัญหา Chrome ของฉัน ฉันยังคงต้องการเปิดเผยว่าปัญหาคืออะไร (หากมีบางอย่างเกี่ยวข้องกับโครเมี่ยมของฉันหรือบางอย่าง)

ฉันค่อนข้างแน่ใจว่ามันไม่ใช่สไตล์เนื่องจาก John Catterfeld ทำซ้ำโดยไม่มีปัญหาดังนั้นฉันหวังว่าจะมีใครสักคนที่สามารถชี้ทางที่ถูกต้องให้ฉันได้ว่าทำไมสิ่งนี้ถึงเกิดขึ้นกับฉัน (โครเมี่ยมของลูกค้าของฉันก็เช่นกัน สิ่งนี้อาจเป็นของ Chrome / OSX หาก John ใช้ windows)

ฉันมีปัญหาเดียวกัน

ฉันแก้ไขโดยลบความสูงบรรทัดออกจากข้อมูลที่ฉันป้อน ตรวจสอบว่ามีความสูงของเส้นซึ่งเป็นสาเหตุของปัญหาหรือไม่

ฉันมีปัญหาคล้ายกันปัญหาของฉันคือช่องว่างด้านข้างและวิธีแก้ปัญหาคือการเยื้องข้อความฉันไม่ทราบว่าการเยื้องข้อความมีผลต่อตำแหน่งด้านตัวยึด

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; 

ทำงานให้ฉัน;)

การตั้งค่าline-height: 0px;แก้ไขให้ฉันใน Chrome

การลบความสูงของบรรทัดจะทำให้ข้อความของคุณสอดคล้องกับตัวยึดตำแหน่ง แต่ก็ไม่สามารถแก้ปัญหาของคุณได้อย่างถูกต้องเนื่องจากคุณต้องปรับการออกแบบของคุณให้เข้ากับข้อบกพร่องนี้ (ไม่ใช่ข้อบกพร่อง) การเพิ่มแนวตั้งจะไม่ทำข้อตกลงเช่นกัน ฉันไม่ได้ลองในเบราว์เซอร์ทั้งหมด แต่ใช้ไม่ได้ใน Safari 5.1.4 อย่างแน่นอน

ฉันเคยได้ยินเกี่ยวกับการแก้ไข jQuery สำหรับสิ่งนี้นั่นไม่ใช่การสนับสนุนตัวยึดตำแหน่งข้ามเบราว์เซอร์ (jQuery.placeholder) แต่สำหรับการจัดรูปแบบตัวยึดตำแหน่ง แต่ฉันยังไม่พบ

ในระหว่างนี้คุณสามารถแก้ไขตารางในหน้านี้ซึ่งแสดงการรองรับเบราว์เซอร์ที่แตกต่างกันสำหรับสไตล์ต่างๆ

แก้ไข: พบปลั๊กอิน! jquery.placeholder.min.jsให้คุณมีทั้งความสามารถในการจัดแต่งทรงผมเต็มรูปแบบและการสนับสนุนข้ามเบราว์เซอร์ในการต่อรองราคา

ฉันมีปัญหาซึ่งปรากฏใน Internet Explorer เท่านั้น ช่องป้อนข้อมูลเป็นรูปแบบ

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

น่าเสียดายใน IE ตัวยึดตำแหน่งเริ่มต้นไม่อยู่ในตำแหน่งที่ถูกต้อง แต่เมื่อฉันคลิกเข้าไปในช่องแล้วออกจากช่องนี้ตัวยึดจะปรากฏในตำแหน่งที่ถูกต้อง

วิธีแก้ปัญหาของฉันคือการตั้งค่า:

line-height:normal;

ลบความสูงของบรรทัดหรือตั้งค่าโดยใช้ช่องว่างภายใน ... มันใช้งานได้ในเบราว์เซอร์ทั้งหมด

ฉันได้สร้างซอโดยใช้ภาพหน้าจอของคุณเป็นภาพพื้นหลังและลอกการทำเครื่องหมายพิเศษออกและดูเหมือนว่าจะทำงานได้ดี

http://jsfiddle.net/fLdQG/2/ (ต้องใช้เบราว์เซอร์ webkit)

สิ่งนี้เหมาะกับคุณหรือไม่? ถ้าไม่คุณสามารถอัปเดตซอด้วยมาร์กอัปและ CSS ที่แน่นอนได้หรือไม่

ฉันสังเกตเห็นปัญหาเมื่อฉันอัปเดต Chrome บน os x เป็นเวอร์ชันเสถียรล่าสุด (9.0.597.94) ดังนั้นนี่จึงเป็นข้อบกพร่องของ Chrome และหวังว่าจะได้รับการแก้ไข

ฉันไม่อยากแม้แต่จะพยายามแก้ไขปัญหานี้และรอการแก้ไข มันจะหมายถึงการมีงานทำมากขึ้น

ตัวยึดจะไม่ได้รับผลกระทบจากline-heightและpaddingไม่สอดคล้องกันบนเบราว์เซอร์

ฉันพบวิธีแก้ปัญหาอื่นแล้ว

VERTICAL-ALIGN. นี่อาจเป็นครั้งเดียวที่ใช้งานได้ แต่ลองใช้รหัส CSS หลายบรรทัดแทน

ผมพบคำตอบที่แก้ความผิดหวังของฉันเกี่ยวกับเรื่องนี้ในบล็อกของจอห์น 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>