|
導讀網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立... 網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 有時候,HTML中的默認樣式并不能滿足我們的審美,我們想把它修改成自己喜歡的樣式,那怎么辦呢?接下來,這篇文章就和大家聊聊如何修改input中[type="checkbox"]的樣式,需要的小伙伴可以參考一下。對復選框自定義樣式,我們以前一直用的腳本來實現,不過現在可以使用新的偽類 :checkbox 來實現。 如果直接對復選框設置樣式,那么這個偽類并不實用,因為沒有多少樣式能夠對復選框起作用。不過,倒是可以基于復選框的勾選狀態借助組合選擇符來給其他元素設置樣式。 很多時候,無論是為了表單元素統一,還是為了用戶體驗良好,我們都會選擇 label 元素和 input[type="checkbox"] 一起使用。當<label>元素與復選框關聯之后,也可以起到觸發開關的作用。 思路: 1. 可以為<label>元素添加生成性內容(偽元素),并基于復選框的狀態來為其設置樣式; 2. 然后把真正的復選框隱藏起來; 3. 最后把生成內容美化一下。 解決方法: 1. 一段簡單的結構代碼: <input type="checkbox" id="awesome" /> <label for="awesome">Awesome!</label> 2. 生成一個偽元素,作為美化版的復選框,先給偽元素添加一些樣式: input[type="checkbox"] + label::before {
content: "\a0"; /*不換行空格*/
display: inline-block;
vertical-align: .2em;
width: .8em;
height: .8em;
margin-right: .2em;
border-radius: .2em;
background-color: silver;
text-indent: .15em;
line-height: .65; /*行高不加單位,子元素將繼承數字乘以自身字體尺寸而非父元素行高*/
}現在的樣子:
原來的復選框仍然可見,但是我們先給復選框的勾選狀態添加樣式: 3. 給復選框的勾選狀態添加不同的樣式: input[type="checkbox"]:checked + label::before {
content: "\2713";
background-color: yellowgreen;
}現在的樣子:
4. 現在把原來的復選框隱藏: input {
position: absolute;
clip: rect(0, 0, 0, 0);
}現在的樣子:
隱藏原來的復選框時,如果使用 display: none; 的話,那樣會把它從鍵盤 tab 鍵切換焦點的隊列中完全刪除。 延伸 在聚焦和禁用時改變它的樣式: input[type="checkbox"]:focus + label::before {
box-shadow: 0 0 .1em .1em #58a;
}
input[type="checkbox"]:disabled + label::before {
background-color: gray;
box-shadow: none;
color: #555;
}點擊后,得到焦點,現在的樣子:
多選框外多出一層陰影。 以上就是如何修改input中[type="checkbox"]的樣式的詳細內容,更多請關注php中文網其它相關文章! 網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!