สีเฉพาะจุด CSS

ใส่สีของแบรนด์ลงในอินพุตแบบฟอร์ม HTML ในตัวด้วยโค้ดเพียงบรรทัดเดียว

Adam Argyle

Joey Arhar

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

accent-color: hotpink;

CSS accent-color จาก UI ของ CSS ข้อกำหนดเฉพาะมีไว้เพื่อปรับสมดุลสีเขียว-แดง ด้วย CSS เพียงบรรทัดเดียว ซึ่งช่วยให้คุณไม่ต้องเสียเวลาปรับแต่ง นำเสนอวิธีทำให้แบรนด์ ของคุณอยู่ในองค์ประกอบต่างๆ

วันที่

พร็อพเพอร์ตี้ accent-color ยังใช้ได้กับ color-scheme ช่วยให้ผู้เขียนแต้มสีได้ทั้ง 2 สี องค์ประกอบสว่างและมืด ในตัวอย่างต่อไปนี้ ผู้ใช้มีการใช้งานธีมมืด หน้านี้จะใช้ color-scheme: light dark และใช้ accent-color: hotpink เดียวกันสำหรับโหมดมืด ตัวควบคุมแต้มสี Hotpink ที่มีธีม

วันที่

องค์ประกอบที่รองรับ

ปัจจุบันมีเพียง 4 องค์ประกอบที่จะแต้มสีผ่านพร็อพเพอร์ตี้ accent-color ดังนี้ ช่องทำเครื่องหมาย วิทยุ range และ ความคืบหน้า ดูตัวอย่างแต่ละรายการได้ที่นี่ https://accent-color.glitch.me ในสภาวะแสงน้อยและ จะใช้รูปแบบสีเข้ม

ช่องทำเครื่องหมาย

วิทยุ

ช่วง

ความคืบหน้า

รับประกันคอนทราสต์

หากต้องการป้องกันไม่ให้องค์ประกอบที่มีอยู่ไม่สามารถเข้าถึงได้ เบราว์เซอร์ที่มี accent-color จำเป็นต้องระบุความแตกต่างที่เหมาะสม สีเพื่อนำมาใช้ควบคู่ไปกับ สำเนียง ด้านล่างคือภาพหน้าจอที่สาธิตวิธีที่ Chrome 94 (ซ้าย) และ Firefox 92 ตอนกลางคืน (ขวา) จะมีอัลกอริทึมที่แตกต่างกันดังนี้

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

พิเศษ: แต้มสีมากขึ้น

คุณอาจกำลังสงสัยว่าจะแต้มสีมากกว่าองค์ประกอบแบบฟอร์ม 4 รายการนี้ได้อย่างไร ต่อไปนี้คือ แซนด์บ็อกซ์ที่น้อยที่สุดซึ่งปรับสี:

• วงแหวนโฟกัส
• ไฮไลต์การเลือกข้อความ
• แสดงรายการเครื่องหมาย
• สัญญาณบอกสถานะลูกศร (Webkit เท่านั้น)
• ภาพขนาดย่อของแถบเลื่อน (Firefox เท่านั้น)

html {
  --brand: hotpink;
  scrollbar-color: hotpink Canvas;
}

:root { accent-color: var(--brand); }
:focus-visible { outline-color: var(--brand); }
::selection { background-color: var(--brand); }
::marker { color: var(--brand); }

:is(
  ::-webkit-calendar-picker-indicator,
  ::-webkit-clear-button,
  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button
) {
  color: var(--brand);
}

อนาคตที่เป็นไปได้

ข้อกำหนดนี้ไม่ได้จำกัดการใช้ accent-color กับองค์ประกอบ 4 อย่าง ที่แสดงในบทความนี้ อาจมีการเพิ่มการสนับสนุนอื่นๆ ในภายหลัง องค์ประกอบ เช่น <option> ที่เลือกใน <select> อาจถูกไฮไลต์ด้วย accent-color

คุณชอบการย้อมสีอะไรอีกบ้างบนเว็บ ทวีต @argyleink ด้วยตัวเลือกของคุณ และอาจได้รับ เพิ่มลงในบทความนี้แล้ว