0Pricing
CSS Academy · บทเรียน

::placeholder ::selection และ ::marker

กำหนดรูปแบบตัวแทนข้อความในช่องป้อนข้อมูล ส่วนที่เลือกข้อความ และสัญลักษณ์รายการด้วยองค์ประกอบเสมือน

::placeholder ::selection และ ::marker เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

::placeholder

::placeholder ใช้กำหนดรูปแบบข้อความตัวแทนภายในองค์ประกอบช่องป้อนข้อมูลและ textarea ของแบบฟอร์ม โดยรองรับพร็อพเพอร์ตี CSS เพียงบางส่วนเท่านั้น

<input type="text" placeholder="Type your name…" />

พร็อพเพอร์ตีที่รองรับใน ::placeholder

พร็อพเพอร์ตี CSS ไม่ได้ทำงานทั้งหมดบน ::placeholder พร็อพเพอร์ตีที่รองรับ ได้แก่ color, font-size, font-weight, font-style, letter-spacing, opacity และอื่น ๆ อีกเล็กน้อย ไม่รองรับพร็อพเพอร์ตีด้านการจัดวาง

การเข้าถึง placeholder

ข้อความตัวแทนจะหายไปเมื่อผู้ใช้พิมพ์ และไม่ควรใช้แทนองค์ประกอบ <label> โปรดจัดเตรียมป้ายกำกับที่มองเห็นได้สำหรับช่องกรอกข้อมูลเสมอ นอกจากนี้ คอนทราสต์ของข้อความตัวแทนต้องเป็นไปตามอัตราส่วน 4.5:1 ของ WCAG

::selection

::selection ใช้กำหนดรูปแบบข้อความที่ผู้ใช้ไฮไลต์ด้วยเคอร์เซอร์ และช่วยสร้างสีการเลือกตามแบรนด์

<p>Select this text with your cursor to see the branded highlight color.</p>

พร็อพเพอร์ตีที่รองรับใน ::selection

มีพร็อพเพอร์ตีเพียงไม่กี่รายการที่ใช้กับ ::selection ได้ ได้แก่ color, background-color, text-shadow และ text-decoration ส่วนรายการอื่นจะถูกละเว้น

::marker

::marker ใช้กำหนดรูปแบบเครื่องหมายของรายการ — จุดหรือหมายเลขในรายการ <ul> และ <ol>

<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>
<ol>
  <li>Step one</li>
  <li>Step two</li>
</ol>

พร็อพเพอร์ตีที่รองรับใน ::marker

พร็อพเพอร์ตีของ ::marker ที่รองรับ ได้แก่ color, content, font-size, font-family, font-weight, font-style และ unicode-bidi

เครื่องหมายรายการแบบกำหนดเองด้วย ::marker

ใช้อีโมจิหรืออักขระพิเศษเป็นเครื่องหมายรายการ:

<ul>
  <li>Normal item</li>
  <li class="warning">Warning item</li>
</ul>

::first-line

::first-line ใช้กำหนดรูปแบบบรรทัดแรกที่แสดงผลขององค์ประกอบบล็อก ซึ่งหมายถึงบรรทัดจริงตามการแสดงผล ไม่ใช่การขึ้นบรรทัดแรกใน HTML มีประโยชน์สำหรับการจัดรูปแบบย่อหน้าเปิดเรื่องให้คล้ายอักษรตัวใหญ่ต้นย่อหน้า

<p>This is the opening line of a paragraph that wraps onto a second line once it runs out of horizontal room in its container, so you can see the effect clearly.</p>

::first-letter

::first-letter กำหนดเป้าหมายตัวอักษรแรกของบรรทัดแรกที่จัดรูปแบบ การใช้งานแบบคลาสสิกคือการทำอักษรตัวใหญ่ต้นย่อหน้าในงานจัดรูปแบบตัวอักษรสไตล์นิตยสาร

<p>Once upon a time, a designer discovered the drop cap and typography was never the same again.</p>

::cue สำหรับจัดรูปแบบคำบรรยาย

::cue ใช้กำหนดรูปแบบคำบรรยาย VTT ในองค์ประกอบ HTML <video> ซึ่งเป็นองค์ประกอบเทียมเฉพาะทางแต่สำคัญสำหรับสื่อที่เข้าถึงได้

<p style="color:#888;">::cue styles VTT subtitle text inside a &lt;video&gt; element (no visible effect without an active video/track, shown here for reference).</p>
<video controls style="max-width:100%;"></video>

ตรวจสอบความเข้าใจ

องค์ประกอบเทียมใดช่วยให้กำหนดรูปแบบจุดหรือหมายเลขของรายการได้

สรุปทบทวน

::placeholder ใช้กำหนดรูปแบบข้อความตัวแทนในช่องป้อนข้อมูล ::selection ใช้กำหนดรูปแบบข้อความที่ไฮไลต์ ::marker ใช้กำหนดรูปแบบจุดและหมายเลขของรายการ ::first-letter และ ::first-line ช่วยปรับแต่งรูปแบบตัวอักษรอย่างละเอียด ทั้งหมดรองรับพร็อพเพอร์ตี CSS เพียงบางส่วนเท่านั้น

คำถามที่พบบ่อย

บทเรียน “::placeholder ::selection และ ::marker” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “::placeholder ::selection และ ::marker” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “::placeholder ::selection และ ::marker”

กำหนดรูปแบบตัวแทนข้อความในช่องป้อนข้อมูล ส่วนที่เลือกข้อความ และสัญลักษณ์รายการด้วยองค์ประกอบเสมือน คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “::placeholder ::selection และ ::marker” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม

ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. เนื้อหา ::before และ ::after
  2. ::placeholder ::selection และ ::marker
  3. ตัวนับ CSS ด้วย ::before
  4. ลวดลายตกแต่งด้วยองค์ประกอบเสมือน
← กลับไปที่ CSS Academy