<input type='text'/>ฉันต้องการให้เข้ากับสไตล์ของตัวชี้มุ่งเน้น โดยเฉพาะสีและความหนา

หากคุณใช้เว็บเบราว์เซอร์คุณสามารถเปลี่ยนสีของคาเร็ตได้โดยทำตามตัวอย่าง CSS ถัดไป ไม่แน่ใจว่าเปลี่ยนรูปแบบด้วย CSS ได้ไหม

input,
textarea {
    font-size: 24px;
    padding: 10px;
    
    color: red;
    text-shadow: 0px 0px 0px #000;
    -webkit-text-fill-color: transparent;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color:
    text-shadow: none;
    -webkit-text-fill-color: initial;
}

นี่คือตัวอย่าง: http://jsfiddle.net/8k1k0awb/

'Caret' คือคำที่คุณกำลังมองหา ฉันเชื่อว่ามันเป็นส่วนหนึ่งของการออกแบบเบราว์เซอร์ไม่ใช่อยู่ในความเข้าใจของ css

อย่างไรก็ตามนี่เป็นบทความที่น่าสนใจเกี่ยวกับการจำลองการเปลี่ยนแปลงคาเร็ตโดยใช้ Javascript และ CSS http://www.dynamicdrive.com/forums/showthread.php?t=17450ฉันดูเหมือนจะแฮ็คนิดหน่อย แต่อาจเป็นวิธีเดียวที่จะ ทำงานให้สำเร็จ ประเด็นหลักของบทความคือ:

เราจะมีพื้นที่ข้อความธรรมดาอยู่ที่ไหนสักแห่งในหน้าจอจากมุมมองของผู้ดูและเมื่อผู้ใช้คลิกที่ "เทอร์มินัลปลอม" ของเราเราจะโฟกัสไปที่พื้นที่ข้อความและเมื่อผู้ใช้เริ่มพิมพ์เราก็จะต่อท้ายข้อมูลที่พิมพ์ลงในพื้นที่ข้อความ ไปยัง "เทอร์มินัล" ของเราและนั่นก็คือ

นี่คือการสาธิตในการดำเนินการ

อัปเดต 2018

มีคุณสมบัติ css ใหม่caret-colorซึ่งนำไปใช้กับคาเร็ตของพื้นที่inputหรือ contenteditableการสนับสนุนเพิ่มขึ้น แต่ไม่ 100% และสิ่งนี้มีผลกับสีเท่านั้นไม่ใช่ความกว้างหรือลักษณะอื่น ๆ

input{
  caret-color: rgb(0, 200, 0);
}

<input type="text"/>

ใน CSS3 มีตอนนี้เป็นวิธีที่ชาวพื้นเมืองจะทำเช่นนี้โดยไม่ต้องมีการแฮ็กที่แนะนำในคำตอบที่มีอยู่: คุณสมบัติcaret-color

มีหลายสิ่งที่คุณสามารถทำได้ด้วยคาเร็ตดังที่แสดงด้านล่าง มันสามารถเคลื่อนไหวได้

/* Keyword value */
caret-color: auto;
color: transparent;
color: currentColor;

/* <color> values */
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0, 200, 0);
caret-color: hsla(228, 4%, 24%, 0.8);

caret-colorคุณสมบัติได้รับการสนับสนุนจาก Firefox 55 และ Chrome สนับสนุน 60 ยังมีอยู่ในตัวอย่างเทคนิค Safari และ Opera ใน ( แต่ยังไม่อยู่ในขอบ) คุณสามารถดูตารางการสนับสนุนในปัจจุบันที่นี่

นี่คือผู้ขายบางรายที่คุณอาจมองหา

::-webkit-input-placeholder {color: tomato}
::-moz-placeholder          {color: tomato;} /* Firefox 19+ */
:-moz-placeholder           {color: tomato;} /* Firefox 18- */
:-ms-input-placeholder      {color: tomato;}

คุณยังสามารถจัดรูปแบบสถานะต่างๆได้เช่นโฟกัส

:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder          {color: transparent}
:focus:-moz-placeholder           {color: transparent}
:focus:-ms-input-placeholder      {color: transparent}

คุณยังสามารถทำการเปลี่ยนบางอย่างได้เช่น

::-VENDOR-input-placeholder       {text-indent: 0px;   transition: text-indent 0.3s ease;}
:focus::-VENDOR-input-placeholder  {text-indent: 500px; transition: text-indent 0.3s ease;}

มันเพียงพอที่จะใช้คุณสมบัติสีควบคู่ไปกับ-webkit-text-fill-colorด้วยวิธีนี้:

    input {
        color: red; /* color of caret */
        -webkit-text-fill-color: black; /* color of text */
    }

<input type="text"/>

ทำงานในเบราว์เซอร์ WebKit (แต่ไม่ใช่ใน iOS Safari ซึ่งยังคงใช้สีของระบบสำหรับคาเร็ต) และใน Firefox

สถานที่ให้บริการ -webkit ข้อความเติมสี CSS ระบุเติมสีของ ตัวอักษรของข้อความ หากไม่ได้ตั้งค่าคุณสมบัตินี้ค่าของคุณสมบัติสีจะถูกใช้ MDN

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