Currently, Firefox, Safari, Chrome, and operabrowsers support text selection attributes. If the browser does not support this attribute, it will be ignored directly, so it will not have any adverse effects.
The following is a simple example of how to improve the UI experience.
2. Change the default color
First, for a simple example, we can set the basic style selected for the entire page text, as shown below:
The code is as follows: |
Copy code |
: Selection {background: # d3d3d3; color: #555; }::-moz-selection {background: # d3d3d3; color: #555 ;}:: -webkit-selection {background: # d3d3d3; color: #555 ;} |
As a result, the default blue background selected by the text changes to light gray, as shown in the following figure, captured from the Chrome browser:
Of course, we can use the CSS selector to specify the style status after the selected text of the specific label content, for example, the selected chestnut color as shown below:
The code is as follows: |
Copy code |
. Maroon: selection {background: maroon; color: # fff ;}. maroon:-moz-selection {background: maroon; color: # fff ;}. maroon:-webkit-selection {background: maroon; color: # fff ;}
<P>... text content. </P>
|
The following figure shows the result:
Similarly, you can specify the CSS selector and the selected style of the corresponding content text/image based on your own needs. Here we will not give an example one by one.