Thay đổi màu đánh dấu khi chọn văn bản trong đầu vào văn bản HTML

Question

Tôi đã tìm kiếm điều này trên toàn bộ web và thậm chí không thể tìm thấy bất kỳ ai khác ngay cả ... Điện thoại

cách để thay đổi màu của vùng tô sáng trong đầu vào văn bản khi văn bản được chọn? Không phải là đường viền nổi bật hoặc nền, nhưng phần xuất hiện xung quanh văn bản khi bạn có văn bản thực sự được chọn.

Answer 1

Cảm ơn cho các liên kết, nhưng nó dường như là nếu văn bản thực tế làm nổi bật chỉ không được tiếp xúc.

Theo như vấn đề thực tế trong tầm tay, tôi đã chọn cách tiếp cận khác bằng cách loại bỏ hoàn toàn nhu cầu nhập văn bản và sử dụng innerHTML với một số JavaScript. Nó không chỉ nhận được xung quanh văn bản làm nổi bật, nó thực sự trông sạch hơn nhiều.

Chi tiết tinh chỉnh này đối với điều khiển biểu mẫu HTML chỉ là một đối số tốt để loại bỏ hoàn toàn các điều khiển biểu mẫu. Haha!

Answer 2

Nếu bạn đang tìm kiếm này:

Dưới đây là liên kết:

http://css-tricks.com/overriding-the-default-text-selection-color-with-css/

Answer 3

Tôi đoán đây có thể giúp:

lựa chọn phong cách

Có thể xác định màu sắc và nền cho văn bản người dùng lựa chọn.

Hãy thử bên dưới. Nếu bạn chọn một cái gì đó và nó trông như thế này, trình duyệt của bạn hỗ trợ các kiểu lựa chọn.

Đây là đoạn có normal ::selection.

Đây là đoạn có ::-moz-selection.

Đây là đoạn có ::-webkit-selection.

Testsheet:

p.normal::selection { 
    background:#cc0000; 
    color:#fff; 
} 

p.moz::-moz-selection { 
    background:#cc0000; 
    color:#fff; 
} 

p.webkit::-webkit-selection { 
    background:#cc0000; 
    color:#fff; 
} 

Quoted from Quirksmode

Answer 4

Tôi nhận ra đây là một câu hỏi cũ nhưng đối với bất cứ ai đi qua nó điều này có thể được thực hiện bằng contenteditable như in this JSFiddle.

Kêu gọi Alex đã đề cập đến điều này trong các nhận xét (Tôi không thấy điều đó cho đến bây giờ!)

Answer 5

@ Mike Eng,

On chọn màu nền văn bản, màu sắc văn bản có thể được thay đổi với sự giúp đỡ của :: lựa chọn, lưu ý rằng :: lựa chọn công trình ở trong chrome, để làm cho điều đó làm việc trong các trình duyệt dựa trên firefox hãy thử cái này :: - moz-selection

Hãy thử đoạn mã sau trong reset.css hoặc trang css nơi bạn muốn áp dụng hiệu ứng chính xác.

::selection{ 
    //Works only for the chrome browsers 
    background-color: #CFCFCF; //This turns the background color to Gray 
    color: #000; // This turns the selected font color to Black 
} 

::-moz-selection{ 
    //Works for the firefox based browsers 
    background-color: #CFCFCF; //This turns the background color to Gray 
    color: #000; // This turns the selected font color to Black 
} 

Mã trên cũng sẽ hoạt động ngay cả trong hộp nhập.

Answer 6

đây là mã.

/*** Works on common browsers ***/ 
::selection { 
    background-color: #352e7e; 
    color: #fff; 
} 

/*** Mozilla based browsers ***/ 
::-moz-selection { 
    background-color: #352e7e; 
    color: #fff; 
} 

/***For Other Browsers ***/ 
::-o-selection { 
    background-color: #352e7e; 
    color: #fff; 
} 

::-ms-selection { 
    background-color: #352e7e; 
    color: #fff; 
} 

/*** For Webkit ***/ 
::-webkit-selection { 
    background-color: #352e7e; 
    color: #fff; 
} 

Answer 7

Tất cả câu trả lời ở đây là chính xác khi nói đến yếu tố giả ::selection và cách hoạt động. Tuy nhiên, câu hỏi trên thực tế đặc biệt yêu cầu cách sử dụng nó trên đầu vào văn bản.

Cách duy nhất để làm điều đó là để áp dụng các quy tắc thông qua một phụ huynh của các đầu vào (bất cứ phụ huynh cho rằng vấn đề):

.parent ::-webkit-selection, [contenteditable]::-webkit-selection { 
 
\t background: #ffb7b7; 
 
} 
 

 
.parent ::-moz-selection, [contenteditable]::-moz-selection { 
 
\t background: #ffb7b7; 
 
} 
 

 
.parent ::selection, [contenteditable]::selection { 
 
\t background: #ffb7b7; 
 
} 
 

 
/* Aesthetics */ 
 
input, [contenteditable] { 
 
    border:1px solid black; 
 
    display:inline-block; 
 
    width: 150px; 
 
    height: 20px; 
 
    line-height: 20px; 
 
    padding: 3px; 
 
}

<span class="parent"><input type="text" value="Input" /></span> 
 
<span contenteditable>Content Editable</span>

Answer 8

Hãy thử mã này để sử dụng:

/* For Mozile Firefox Browser */ 

::-moz-selection { background-color: #4CAF50; } 

/* For Other Browser*/ 
::selection { background-color: #4CAF50; } 

Answer 9

Đây là chà:

 ::selection { 
     background: #ffb7b7; /* WebKit/Blink Browsers / 
    } 
    ::-moz-selection { 
     background: #ffb7b7; / Gecko Browsers */ 
    }

Trong bộ chọn lựa chọn, màu và nền là các thuộc tính duy nhất hoạt động. Những gì bạn có thể làm cho một số tinh tế bổ sung, là thay đổi màu lựa chọn cho các đoạn văn khác nhau hoặc các phần khác nhau của trang.

Tất cả tôi đã làm là sử dụng màu sắc lựa chọn khác nhau cho các đoạn văn với các lớp khác nhau:

 p.red::selection { 
     background: #ffb7b7; 
    } 
    p.red::-moz-selection { 
     background: #ffb7b7; 
    } 
    p.blue::selection { 
     background: #a8d1ff; 
    } 
    p.blue::-moz-selection { 
     background: #a8d1ff; 
    } 
    p.yellow::selection { 
     background: #fff2a8; 
    } 
    p.yellow::-moz-selection { 
     background: #fff2a8; 
    }

Lưu ý cách selectors không kết hợp, mặc dù> khối phong cách đang làm điều tương tự. Nó không hoạt động nếu bạn kết hợp chúng:

<pre>/* Combining like this WILL NOT WORK */ 
p.yellow::selection, 
p.yellow::-moz-selection { 
    background: #fff2a8; 
}</pre> 

Đó là bởi vì trình duyệt bỏ qua toàn bộ bộ chọn nếu có một phần của chúng không hiểu hoặc không hợp lệ. Có một số ngoại lệ cho điều này (IE 7?) Nhưng không liên quan đến các bộ chọn này.

DEMO

LINK WHERE INFO IS FROM