Tạo kiểu chữ nhập văn bản

Question

Tôi muốn tạo kiểu cho dấu mũ tập trung <input type='text'/>. Cụ thể, màu sắc và độ dày.

Answer 1

Nếu bạn đang sử dụng một trình duyệt webkit bạn có thể thay đổi màu sắc của caret bằng cách làm theo các đoạn mã CSS sau. 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: #ccc; 
    text-shadow: none; 
    -webkit-text-fill-color: initial; 
} 

Dưới đây là một ví dụ: http://jsfiddle.net/8k1k0awb/

Answer 2

'Dấu mũ' là từ bạn đang tìm kiếm. Tôi tin rằng mặc dù, nó là một phần của thiết kế trình duyệt, và không phải trong nắm bắt của css.

Tuy nhiên, đây là một điều thú vị khi viết trên mô phỏng thay đổi dấu mũ bằng cách sử dụng Javascript và CSShttp://www.dynamicdrive.com/forums/showthread.php?t=17450 Dường như có một chút hacky với tôi, nhưng có lẽ là cách duy nhất để thực hiện tác vụ. Vấn đề chính của bài viết là:

Chúng tôi sẽ có một textarea đồng bằng ở đâu đó trong màn hình ra khỏi cái nhìn của người xem và khi người dùng nhấp vào "giả thiết bị đầu cuối" của chúng tôi, chúng tôi sẽ tập trung vào textarea và khi người dùng bắt đầu nhập, chúng tôi sẽ chỉ cần nối thêm dữ liệu được nhập vào vùng văn bản vào "thiết bị đầu cuối" của chúng tôi và đó là điều đó.

HERE là một bản demo trong hành động

Answer 3

Dưới đây là một số nhà cung cấp bạn tôi có thể 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ó thể tiểu bang khác nhau cũng phong cách, chẳng hạn như tập trung

: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 đó, 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;} 

Answer 4

Trong CSS3, hiện có cách gốc để thực hiện việc này, không có bất kỳ gợi ý nào được đề xuất trong các câu trả lời hiện có: the caret-color property.

Có rất nhiều việc bạn có thể làm với dấu mũ, như bên dưới. Nó thậm chí có thể be animated.

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

Thuộc tính caret-color đượ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 here.

Answer 5

Nó là đủ để sử dụng màu bất động sản cùng với -webkit-text-fill màu theo cách này:

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

<input type="text"/>

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

Thuộc tính CSS -webkit-text-fill màu xác định màu fill của ký tự của 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 được sử dụng. MDN

Vì vậy, điều này có nghĩa là chúng tôi thiết lập màu văn bản với màu văn bản và màu sắc caret với thuộc tính mà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ũ.