CSS的::selection使用方法

来源:http://www.cnblogs.com/jihua/archive/2016/01/19/selectioncolor.html
-Advertisement-
Play Games

請選擇本頁面文本看看:http://hovertree.com/h/bjaf/38hq6y9d.htmCSS改變預設文本選中的顏色的方法一般情況下在網頁里的文本我們用滑鼠選中的時候都是藍色的,這個預設顏色也是可以更改的,本文我們學習如何使用CSS3實現改變預設文本選中的顏色。以我的系統舉例(xp 默...


請選擇本頁面文本看看:http://hovertree.com/h/bjaf/38hq6y9d.htm

CSS改變預設文本選中的顏色的方法


一般情況下在網頁里的文本我們用滑鼠選中的時候都是藍色的,這個預設顏色也是可以更改的,本文我們學習如何使用CSS3實現改變預設文本選中的顏色。
以我的系統舉例(xp 預設主題),瀏覽器上頁面文字選中後預設的背景色是一種藍色, 不同瀏覽器的顏色有些許差異,但大致相同,文字顏色也近乎白色。

一、關於瀏覽器文字選中顏色:
在CSS3的爸爸 媽媽還沒有相親認識的時候,要改變頁面上文字選中後的背景色以及文字顏色,就跟讓太監生孩子一樣困難。但是,隨著CSS3呱呱落地,獲得越來越多的瀏覽器認可,一切又顯得那麼自然而然。雖然有些頑固的糟老頭(如IE瀏覽器)還不認可這個新生的CSS3,但是絲毫不影響其在其他瀏覽器上對UI的又一次改進。
目前Firefox、Safari、Chrome以及Opera瀏覽器都支持文本選擇屬性,如果瀏覽器不支持該屬性,會直接忽略它,所以不會產生任何不良的影響。下麵就簡單展示下這個改進UI體驗的小技巧。 by 何問起

二、改變預設選中顏色:
首先,簡單點的例子,我們可以設置整個頁面文本選中的基本樣式,如下:

::selection { background:deeppink; color:lightgreen; } ::-moz-selection { background:deeppink; color:lightgreen; } ::-webkit-selection { background:deeppink; color:lightgreen;}

 

同樣的,你可以根據自己的需要,指定CSS選擇器以及對應內容文字/圖片等的選中樣式,這裡就不一一舉例了。

三、結語:
本文只是一個技術交流,實際工作中是否使用還得看具體情況,在商業網站中我是絕不會使用:selection來改變文本選中的樣式的,要是個人網站或是設計類網站倒是很有可能使用此屬性來讓網站蓬蓽生輝。當然,每個人在頁面重構的過程中所註重的地方時不一樣的,所以,對:selection的態度僅代表個人觀點。


代碼:

<style>
::selection { background:deeppink; color:lightgreen; } ::-moz-selection { background:deeppink; color:lightgreen; } ::-webkit-selection { background:deeppink; color:lightgreen;}</style>

 

示例二:
<style>
::selection { background:deeppink; color:white; } ::-moz-selection { background:deeppink; color:white; } ::-webkit-selection { background:deeppink; color:white;}</style>

 

轉載自:http://hovertree.com/h/bjaf/38hq6y9d.htm 何問起


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 在這時碰到了一個圓角邊框的問題,以前的代碼是在每個頁面寫一個固定結構的div,使用背景圖片來實現圓角邊框。代碼結構大致如下:.top_border{background:url(topborder.png);}.left_border{background:url(leftborder.png);}...
  • 好吧,因為很重要的事情,幾天沒寫筆記了。關於對象:||可以用來填充預設值,如:myApp.name || "無"&&可以用來避免錯誤,myApp.NameObj有某種情況不存在,那麼可以用myApp.NameObj &&myApp.NameObj.Name避免腳本錯誤所有通過對象字面量創建的對象都連...
  • 我們知道,MongoDB屬於文檔型資料庫,其存儲的文檔類型都是JSON對象。正是由於這一特性,我們在Node.js中會經常使用MongoDB進行數據的存取。但由於Node.js是非同步執行的,這就導致我們無法保證每一次的資料庫save操作都是原子型的。也就是說,如果客戶端連續兩次發起同一事件將數據.....
  • 前些天在寫一個項目的時候,使用cookie來存儲一些用戶數據,在用戶登出時需要清理以往的數據,對於一個初學者來說,我需要學習如何清除一個已知的cookie。首先,引入兩個js文件: 1.jquery-1.12.0.min.js這是編輯這篇文章時最新的jQuery; 2.carhartl-jque.....
  • javascript基本概念重要知識點總結。
  • 想通過JQuery來check或者uncheck頁面上的checkbox控制項,我們可能會想到用下麵的代碼:$('#chk-all').on('click', function(){ var checked = $(this).is(':checked'); $("input[type...
  • 在網頁佈局中,經常用到高度自適應增長的佈局。如左側是文章內容部分,隨著文章內容的變化,高度也不固定,右側則是一些固定高度的相關內容。如圖所示: 簡單摸索後發現CSS中有一個min-height的屬性,如果設置min-height為200px,當高度大於200px時,則自動開始增長;小於20...
  • 動畫效果在網站中是一種非常常見的互動式體驗效果,比如側邊欄分享、圖片淡入淡出,我們把這種動畫效果就叫做運動,也就是讓物體動起來。如果想讓一個物體動起來,無非就是改變它的速度,也就是改變屬性值,比如 left、right、width、height、opacity ,那麼既然是運動,就可以分為很多種.....
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...