Sử dụng bộ chọn CSS :: selector để thay đổi màu tô sáng mặc định trong khi chọn văn bản. Chỉ sử dụng CSS và thực hiện các thủ thuật thú vị để có trải nghiệm người dùng tốt hơn. Tất cả đều có ví dụ.

Bạn đang xem : màu văn bản đầu vào css

Mục lục < / h2>

Mỗi khi người dùng chọn một văn bản để đánh dấu, nó sẽ tự động lấy một số màu nền và đôi khi cũng thay đổi màu của văn bản. Nếu bạn chưa từng để ý, hãy chọn câu này để xem màu nền bên ngoài văn bản.

Nếu màu xanh lam mặc định khiến bạn khó chịu hoặc vì bất kỳ lý do gì, có thể liên quan đến thiết kế trang web của bạn, bạn cần thay đổi màu đánh dấu, CSS3 cho bạn cơ hội đó!

Phần tử giả :: selection là một trong những tính năng thú vị của CSS3, tính năng này ghi đè màu đánh dấu văn bản cấp trình duyệt hoặc cấp hệ thống và giúp bạn có thể chỉ định màu và nền cho tin nhắn mà người dùng chọn.

Bạn có thể thay đổi màu hoặc màu nền của một số yếu tố cụ thể hoặc toàn bộ trang web của bạn.

Nhưng các thuộc tính thực tế có thể được sử dụng với bộ chọn giả này rất hạn chế. Về cơ bản, với sự trợ giúp của phần tử giả :: select các giá trị chỉ của 3 thuộc tính, chẳng hạn như color , background-color text-shadow , có thể được thay đổi. Trong bài viết này, chúng tôi sẽ trình bày tác động của từng thuộc tính này.

Để tương thích với trình duyệt, hãy sử dụng phần mở rộng thuộc tính

– moz-

để nhận hỗ trợ từ Firefox (

:: – moz-selection

).

Cách Thay đổi Màu Phông chữ khi Đánh dấu Văn bản

Để thay đổi màu của một phần tử, chỉ cần tạo kiểu cho phần tử đó bằng :: phần tử giả lựa chọn.

Ví dụ về cách thay đổi màu phần tử với :: selection:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

. green

:: - moz-selection { màu:

# 8ebf42

; }

. green

:: selection

{

color

:

# 8ebf42

; }

. màu tím

:: - moz-selection { màu:

# b30cb3

; }

. màu tím

:: lựa chọn

{

color

:

# b30cb3

; }

. cam

:: - moz-selection { color:

# ffa500

; }

. cam

:: lựa chọn

{

color

:

# ffa500

; }

. lightblue

:: - moz-selection { color:

# add8e6

; }

. lightblue

:: selection

{

color

:

# add8e6

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

p

class

=

" xanh "

& gt;

Chọn văn bản này để xem màu chữ xanh lá cây.

& lt; /

p

& gt;

& lt;

p

class

=

" cam "

& gt;

Chọn văn bản này để xem màu chữ cam.

& lt; /

p

& gt;

& lt;

p

class

=

" màu tím "

& gt;

Chọn văn bản này để xem màu chữ tím.

& lt; /

p

& gt;

& lt;

p

class

=

"lightblue"

& gt;

Chọn văn bản này để xem màu phông chữ xanh lam nhạt.

& lt; /

p

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Kết quả

Chọn văn bản này để xem màu chữ xanh lá cây.

Chọn văn bản này để xem màu chữ cam.

Chọn văn bản này để xem màu chữ tím.

Chọn văn bản này để xem màu phông chữ xanh lam nhạt.

Cách thay đổi màu nền khi tô sáng văn bản

Để thay đổi màu nền khi đánh dấu văn bản, chỉ cần tạo kiểu cho phần tử bằng :: lựa chọn và đặt màu ưa thích của bạn cho thuộc tính background-color.

Ví dụ về cách thay đổi màu nền với :: selection:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

. green

:: - moz-selection { background-color:

# 8ebf42

; }

. green

:: selection

{

background-color

:

# 8ebf42

; }

. yellow

:: - moz-selection { background-color:

# ffcc00

; }

. yellow

:: selection

{

background-color

:

# ffcc00

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

p

& gt;

Đây là văn bản có lựa chọn mặc định là background-color.

& lt; /

p

& gt;

& lt;

p

class

=

" green "

& gt;

Chọn văn bản này để xem nền màu xanh lục.

& lt; /

p < / p> & gt;

& lt;

p

class

=

" yellow "

& gt;

Chọn văn bản này để xem nền màu vàng.

& lt; /

p < / p> & gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Trong trường hợp bạn không muốn chọn bất kỳ màu nền nào, chỉ cần đặt giá trị “trong suốt” của thuộc tính

background-color

.

Cách thay đổi màu bóng văn bản khi chọn văn bản

Tiến xa hơn với :: phần tử giả lựa chọn và thêm, xóa hoặc thay đổi thậm chí cả loại hiệu ứng bóng văn bản trên lựa chọn.

Bạn chỉ cần chỉ định thuộc tính text-shadow cho phần tử giả :: select.

Ví dụ về cách thay đổi loại bóng văn bản:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

. shadow2

{

text-shadow

:

1px

1px

1px

; }

. shadow3

{

text-shadow

:

1px

2px

4px

# 000

; }

. shadow4

{

text-shadow

:

1px

2px

4px

; }

. shadow1

:: - moz-selection { text-shadow:

1px

1px

1px

;

background-color

: trong suốt; }

. shadow1

:: selection

{

text-shadow

:

1px

1px

1px

;

background-color

: trong suốt; }

# shadow2

:: - moz-selection { text-shadow: không có;

background

:

# fffae6

; }

. shadow2

:: selection

{

text-shadow

: không có;

background

:

# fffae6

; }

. shadow3

:: - moz-selection { text-shadow:

1px

1px

2px

< p class = "hljs-number"> # 222

; }

. shadow3

:: selection

{

text-shadow

:

1px

1px

2px

# 222

; }

. shadow4

:: - moz-selection { text-shadow:

1px

2px

4px

< p class = "hljs-number"> # 208A28

;

background-color

: trong suốt;

color

:

# 208A28

; }

. shadow4

:: selection

{

text-shadow

:

1px

2px

4px

# 208A28

;

background-color

: trong suốt;

color

:

# 208A28

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

p

class

=

" shadow1 "

& gt;

Chọn văn bản này để tạo bóng văn bản.

& lt; /

p < / p> & gt;

& lt;

p

class

=

" shadow2 "

& gt;

Chọn văn bản này để loại bỏ bóng văn bản.

& lt; /

p < / p> & gt;

& lt;

p

class

=

" shadow3 "

& gt;

Chọn văn bản này để làm cho văn bản rõ ràng hơn.

& lt; /

p < / p> & gt;

& lt;

p

class

=

" shadow4 "

& gt;

Chọn văn bản này để thay đổi màu của bóng văn bản.

& lt; /

p

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Cách Thay đổi Màu Văn bản và Trường Nhập liệu trong khi Chọn văn bản

Cũng có thể thay đổi màu lựa chọn văn bản cho các trường & lt; textarea & gt; & lt; input & gt; .

Ví dụ về việc thay đổi màu lựa chọn văn bản cho & lt; textarea & gt; và & lt; đầu vào & gt ;:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

input

:: - moz-selection { color:

# 1c87c9

;

background-color

:

# eee

; }

input

:: selection

{

color

:

# 1c87c9

;

background-color

:

# eee

; }

textarea

:: - moz-selection { màu trắng;

background-color

:

# 8ebf42

; }

textarea

:: lựa chọn

{

color

: trắng;

background-color

:

# 8ebf42

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

p

& gt;

Phần tử đầu vào

& lt; /

p

& gt;

& lt;

biểu mẫu

& gt;

& lt;

input

type

=

" text "

value

=

" Chọn văn bản đầu vào này "

/ & gt; < / p>

& lt; /

biểu mẫu

& gt;

& lt;

p

& gt;

Phần tử Textarea

& lt; /

p

& gt;

& lt;

textarea

row

=

" 5 "

cols

=

" 25 "

& gt;

Chọn textarea này

& lt; /

textarea

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Cách Thay đổi Màu Chọn Hình ảnh

Thay đổi màu lựa chọn của hình ảnh với sự trợ giúp của yếu tố giả :: lựa chọn. Hãy xem ví dụ đã cho để hiểu rõ ràng.

Ví dụ về cách thay đổi màu lựa chọn hình ảnh với :: select:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

img

{

padding

:

10px

; }

# img2

:: - moz-selection { background-color:

# d9d9d9

; }

# img2

:: selection

{

background-color

:

# d9d9d9

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

p

& gt;

Ở đây, màu lựa chọn cho hình ảnh thứ hai được đặt thành màu xám.

& lt; /

p

& gt;

& lt;

p

& gt;

Chọn cả hai hình ảnh để thấy sự khác biệt.

& lt; /

p

& gt;

& lt;

img

id

=

" img1 "

src

=

" / uploads / media / default / 0001/01 / 25acddb3da54207bc6beb5838f65f022feaa81d7. jpeg "

alt

=

" Aleq "

& gt;

& lt;

img

id

=

" img2 "

src

=

" / uploads / media / default / 0001/01 / 25acddb3da54207bc6beb5838f65f022feaa81d7. jpeg "

alt

=

" Aleq "

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Làm thế nào để có các hiệu ứng lựa chọn khác nhau trên các phần tử giống nhau trong một trang

Hãy tưởng tượng rằng bạn có bốn đoạn văn và bạn muốn có các màu lựa chọn cụ thể cho từng đoạn.

Những gì bạn cần làm 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 với các lớp khác nhau.

Ví dụ về cách thay đổi màu lựa chọn cho các đoạn văn bản khác nhau:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

p

. green

:: lựa chọn

{

background

:

# 8ebf42

; }

p

. green

:: - moz-selection { background:

# 8ebf42

; }

p

. blue

:: lựa chọn

{

background

:

# 1c87c9

; }

p

. blue

:: - moz-selection { background:

# 1c87c9

; }

p

. yellow

:: selection

{

background

:

# ffcc00

; }

p

. yellow

:: - moz-selection { background:

# ffcc00

; }

p

. red

:: lựa chọn

{

background

:

# ff6666

; }

p

. red

:: - moz-selection { background:

# ff6666

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

p

class

=

" green "

& gt;

Chọn văn bản để xem màu đánh dấu xanh lục.

& lt; /

p

& gt;

& lt;

p

class

=

" blue "

& gt;

Chọn văn bản để xem màu đánh dấu xanh lam.

& lt; /

p

& gt;

& lt;

p

class

=

" yellow "

& gt;

Chọn văn bản để xem màu đánh dấu màu vàng.

& lt; /

p

& gt;

& lt;

p

class

=

" red "

& gt;

Chọn văn bản để xem màu tô sáng đỏ.

& lt; /

p

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Ngay cả khi khối kiểu đang làm điều tương tự, các bộ chọn không thể được kết hợp với nhau. Nó sẽ không hoạt động nếu bạn kết hợp chúng, bởi vì các trình duyệt bỏ qua toàn bộ bộ chọn nếu có một phần nào đó mà chúng không hiểu hoặc nó không hợp lệ.

Cách áp dụng các hiệu ứng lựa chọn cho toàn bộ trang

Việc áp dụng các hiệu ứng nổi bật cho một phần tử cụ thể có thể lãng phí thời gian nếu bạn muốn có hiệu ứng tương tự trên toàn bộ trang của trang web của mình. Sử dụng phần tử giả :: lựa chọn, bạn có thể đặt màu lựa chọn cho toàn bộ trang mà không cần áp dụng nó với các phần tử nhất định.

Ví dụ về cách đặt màu lựa chọn cho toàn bộ trang:


& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

:: - moz-selection { color:

# fff

;

background-color

:

# 8ebf42

; }

:: lựa chọn

{

color

:

# fff

;

background-color

:

# 8ebf42

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h3

& gt;

Chọn nhiều phần tử trên trang này và thấy rằng màu lựa chọn được đặt thành trắng, và màu nền được đặt thành màu xanh lục cho toàn bộ trang.

& lt; /

h3

& gt;

& lt;

p

& gt;

Lorem Ipsum chỉ đơn giản là văn bản giả của ngành in ấn và sắp chữ. Lorem Ipsum đã trở thành văn bản giả tiêu chuẩn của ngành kể từ những năm 1500, khi một nhà in không xác định lấy một dãy loại và xáo trộn nó để tạo thành một cuốn sách mẫu. Nó đã tồn tại không chỉ năm thế kỷ, mà còn là bước nhảy vọt trong lĩnh vực sắp chữ điện tử, về cơ bản vẫn không thay đổi. Tôi

& lt; /

p

& gt;

& lt;

img

src

=

" / uploads / media / default / 0001/01 / 25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg "

alt

=

" Aleq "

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Khai báo

:: selection

có hỗ trợ nhiều trình duyệt. Sự cố tương thích với Firefox đã được khắc phục với sự trợ giúp của tiền tố

– moz-

trước bộ chọn. Nói về máy tính bảng hoặc thiết bị di động, bộ chọn này vẫn chưa được iOS Safari và Opera Mini hỗ trợ.

Không nên dựa vào các tính năng CSS không được tiêu chuẩn hóa, vì có nhiều rủi ro hơn rằng trình duyệt web có thể xóa hỗ trợ cho bộ chọn CSS không chính thức vào bất kỳ lúc nào mà không cần thông báo hoặc phần tử giả. Do đó, hãy coi chúng hoàn toàn là sự bổ sung không cần thiết cho trải nghiệm tổng thể của khách truy cập và hãy chuẩn bị sẵn sàng để “phá vỡ” bất cứ lúc nào.

Tạo kiểu cho trang web của bạn bằng phần tử giả này theo cách phối màu của trang web (thay vì sử dụng màu lựa chọn nền xanh lam buồn tẻ) có thể mang lại giao diện hấp dẫn cho trang web của bạn. Đối với một số phần cụ thể của trang web, bạn có thể chọn màu nền đã chọn hoặc áp dụng các màu nền khác nhau cho từng phần. Thay đổi các thuộc tính lựa chọn mặc định luôn có thể dẫn đến chế độ xem tốt hơn và do đó, trải nghiệm người dùng tốt hơn.


Xem thêm những thông tin liên quan đến chủ đề màu văn bản đầu vào css

mouse hover change background and text color of the div css selector

  • Tác giả: Haritha Computers & Technology
  • Ngày đăng: 2019-03-08
  • Đánh giá: 4 ⭐ ( 8112 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: divcolorchange backgrounddivcolor
    css

    change the background and font text color of the div element on mouse hover (over) using css styles

Định dạng văn bản (Text) trong CSS

  • Tác giả: viettuts.vn
  • Đánh giá: 3 ⭐ ( 4310 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài này chúng ta sẽ tìm hiểu về các cách để định dạng dạng văn bản (Text) trong CSS bởi sử dụng các thuộc tính CSS định dạng văn bản. Với một phần tử bất kỳ, bạn có thể thiết lập các thuộc tính text sau

Làm việc với màu sắc trong CSS

  • Tác giả: funix.edu.vn
  • Đánh giá: 5 ⭐ ( 2729 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Làm cách nào để bạn code màu sắc trong CSS? Bài viết này sẽ giới thiệu những gì bạn cần biết.

One moment, please…

  • Tác giả: daotaolaptrinh.edu.vn
  • Đánh giá: 3 ⭐ ( 8113 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Định Kiểu Văn Bản trong CSS

  • Tác giả: www.codehub.com.vn
  • Đánh giá: 4 ⭐ ( 5719 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: CSS cung cấp các thuộc tính giúp định kiểu cho văn bản của phần tử HTML trên trang như: color, text-alignment, text-decoration, text-transform, text-indent, line-height, line-spacing, letter-spacing…

Định dạng văn bản trong CSS (CSS Text Decoration)

  • Tác giả: laptrinhtudau.com
  • Đánh giá: 4 ⭐ ( 2725 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thay đổi màu sắc của văn bản, Thay đổi màu nền của văn bản, Căn chỉnh văn bản trong CSS, Gạch chân văn bản, Chữ hoa và chữ thường trong văn bản,Khoảng cách văn bản trong CSS, Bóng của văn bản

Định dạng văn bản bằng CSS

  • Tác giả: hocjavascript.net
  • Đánh giá: 5 ⭐ ( 6556 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Định dạng văn bản bằng CSS sẽ cho các bạn thấy cách chúng ta định dạng nôi trung trang web. Nếu chúng ta sử dụng HTML để định dạng nội dung thì khi có

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Các cách khác nhau để gọi một hàm trong Python [Ví dụ] - gọi các hàm trong python

By ads_php