Tôi muốn tạo kiểu dấu mũ của một tiêu điểm <input type='text'/>. Cụ thể là màu sắc và độ dày.

Nếu đang sử dụng trình duyệt webkit, bạn có thể thay đổi màu của dấu mũ bằng cách làm theo đoạn CSS tiếp theo. Tôi không chắc liệu Có thể thay đổi định dạng bằng CSS hay không.

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

Đây là một ví dụ: http://jsfiddle.net/8k1k0awb/

'Caret' là từ bạn đang tìm kiếm. Tuy nhiên, tôi tin rằng nó là một phần của thiết kế trình duyệt và không nằm trong tầm hiểu biết của css.

Tuy nhiên, đây là một bài viết thú vị về việc mô phỏng sự thay đổi dấu mũ bằng cách sử dụng Javascript và CSS http://www.dynamicdrive.com/forums/showthread.php?t=17450 Có vẻ hơi khó hiểu với tôi, nhưng có lẽ là cách duy nhất để hoàn thành nhiệm vụ. Điểm chính của bài báo là:

Chúng ta sẽ có một vùng văn bản thuần túy ở đâu đó trong màn hình ngoài tầm nhìn của người xem và khi người dùng nhấp vào "thiết bị đầu cuối giả" của chúng ta, chúng ta sẽ tập trung vào vùng văn bản và khi người dùng bắt đầu nhập, chúng ta sẽ chỉ cần nối dữ liệu đã nhập vào vùng văn bản đến "thiết bị đầu cuối" của chúng tôi và đó là điều đó.

ĐÂY là bản demo đang hoạt động

Cập nhật năm 2018

Có một thuộc tính css mớicaret-color áp dụng cho dấu mũ của một inputhoặc contenteditablekhu vực. Sự hỗ trợ đang tăng lên nhưng không phải 100% và điều này chỉ ảnh hưởng đến màu sắc chứ không ảnh hưởng đến chiều rộng hoặc các loại hình khác.

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

<input type="text"/>

Trong CSS3, hiện có một cách nguyên bản để thực hiện việc này mà không cần bất kỳ phương pháp hack nào được đề xuất trong các câu trả lời hiện có: thuộc caret-colortính .

Có rất nhiều điều bạn có thể làm với dấu mũ, như được thấy bên dưới. Nó thậm chí có thể được hoạt hình .

/* 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);

Các caret-colortài sản được hỗ trợ từ Firefox 55 và Chrome Hỗ trợ 60. cũng có sẵn trong Safari kỹ thuật trước và trong Opera (nhưng chưa có trong Edge). Bạn có thể xem các bảng hỗ trợ hiện tại tại đây .

Đây là một số nhà cung cấp mà bạn có thể tôi đang tìm kiếm

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

Bạn cũng có thể tạo kiểu cho các trạng thái khác nhau, chẳng hạn như tiêu điểm

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

Bạn cũng có thể thực hiện một số chuyển đổi nhất định trên nó, như

::-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;}

Sử dụng thuộc tính màu cùng với -webkit-text-fill-color theo cách này là đủ:

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

<input type="text"/>

Hoạt động trong trình duyệt WebKit (nhưng không hoạt động trong iOS Safari, nơi vẫn được sử dụng màu hệ thống cho dấu mũ) và cả trong Firefox.

Thuộc tính CSS -webkit-text-fill-color chỉ định màu tô của các ký tự trong văn bản . Nếu thuộc tính này không được đặt, giá trị của thuộc tính màu sẽ được sử dụng. MDN

Vì vậy, điều này có nghĩa là chúng tôi đặt màu văn bản với màu chữ điền và màu dấu mũ với thuộc tính màu tiêu chuẩn. Trong trình duyệt không được hỗ trợ, dấu mũ và văn bản sẽ có cùng màu - màu của dấu mũ.