css3修改瀏覽器scroll默認(rèn)樣式

whjin 發(fā)布于2019-04-23 11:47 / 1059人閱讀

摘要：最近公司的新項目。前端樣式采用的螞蟻金服的。比較喜歡一類簡約大方的前端樣式庫。但是在頁面布局上包括一些選擇框。默認(rèn)的樣式簡直丑爆。遂度娘資料，通過進(jìn)行修改。

最近公司的新項目。前端樣式采用的螞蟻金服的antDesign。

比較喜歡antDesign、BootStrap一類簡約大方的前端樣式庫。

但是在頁面布局上、包括一些選擇框。默認(rèn)的scroll樣式簡直丑爆。

遂度娘資料，通過css3進(jìn)行修改。

/*定義滾動條高寬及背景 高寬分別對應(yīng)橫豎滾動條的尺寸*/  
::-webkit-scrollbar  
{  
    width: 4px;  
    height: 4px;  
    background-color: #F5F5F5;  
}

/*定義滾動條軌道 內(nèi)陰影+圓角*/  
::-webkit-scrollbar-track  
{  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    border-radius: 10px;  
    background-color: #FFF;  
}

/*定義滑塊 內(nèi)陰影+圓角*/  
::-webkit-scrollbar-thumb  
{  
    border-radius: 10px;  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    background-color: #AAA;  
}

::-webkit-scrollbar 滾動條整體部分
::-webkit-scrollbar-track?滾動條的軌道（里面裝有Thumb）
::-webkit-scrollbar-track-piece 內(nèi)層軌道
::-webkit-scroll-thumb?滾動條里面的小方塊，能向上向下移動（或往左往右移動，取決于是垂直滾動條還是水平滾動條）
::-webkit-scrollbar-button 滾動條的軌道的兩端按鈕
::-webkit-scrollbar-corner 邊角，即兩個滾動條的交匯處

GPU云服務(wù)器云服務(wù)器默認(rèn)樣式瀏覽器對和css3的支持修改樣式修改默認(rèn)端口自

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1162.html

相關(guān)文章

修改radio、checkbox和select默認(rèn)樣式

摘要：現(xiàn)在前端頁面效果日益豐富，默認(rèn)的組件樣式顯然已經(jīng)不能滿足需求。兼容更低版本瀏覽器的樣式修改最后附上演示鏈接修改和默認(rèn)樣式現(xiàn)在前端頁面效果日益豐富，默認(rèn)的input組件樣式顯然已經(jīng)不能滿足需求。趁著這次開發(fā)的頁面中有這方面的需求，在這里整理一下修改radio、checkbox、select的方法。 radio and checkbox 修改radio的默認(rèn)樣式有兩種常用的方法純CSS...

mumumu 2019-08-21 10:50 評論0 收藏0
CSS題目及答案整理

摘要：解決方案為加上使其形成，根據(jù)規(guī)則第六條，計算高度時就會計算的元素的高度，達(dá)到清除浮動影響的效果。并為這個外層元素設(shè)置，使其形成。生成相對定位的元素，相對于其正常位置進(jìn)行定位。它的所有子元素自動成為容器成員，稱為項目，簡稱項目。原文鏈接在這里 CSS 介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？低版本IE的盒子模型有什么不同的？（1）有兩種， IE 盒子模型（相當(dāng)于box-sizing: bor...

lijy91 2019-08-29 12:34 評論0 收藏0
[總結(jié)]CSS/CSS3常用樣式與web移動端資源

摘要：不允許負(fù)值用百分比來定義縮放比例。解決這個很簡單，在父元素中使用即可解決該。列寬度由單元格內(nèi)容設(shè)定。定義僅有大寫字母。不過，要讓任何元素生效還得借助于一點點。 css/css3常用樣式 CSS修改選中文字的顏色 html代碼：第一段文字選中效果第二段文字選中效果 css代碼： .p1::selection{background:red;color:#fff;} .p2::selec...

The question 2019-08-28 17:54 評論0 收藏0
CSS相關(guān)文章

摘要：如何用獲取虛擬鍵盤高度前端早讀課月號早讀文章由湯谷投稿分享。大殺器和把動畫轉(zhuǎn)換成原生動畫初來乍到，本文搬運自我月份在知乎發(fā)的文章。前端面試之 CSS3 新特性除了 HTML5 的新特性，CSS3 的新特性也是面試中經(jīng)常被問到的。如何用 js 獲取虛擬鍵盤高度？-前端早讀課 9月7號早讀文章由@湯谷投稿分享。正文從這開始～這是一個存在很久的歷史問題了，對于這樣一個具有普遍性的問題...

FrozenMap 2019-08-29 14:21 評論0 收藏0
CSS3學(xué)習(xí)筆記

摘要：在動畫過程中，您能夠多次改變這套樣式。以百分比來規(guī)定改變發(fā)生的時間，或者通過關(guān)鍵詞和，等價于和。為了獲得最佳的瀏覽器支持，您應(yīng)該始終定義和選擇器。注釋請使用動畫屬性來控制動畫的外觀，同時將動畫與選擇器綁定。CSS3 被劃分為模塊其中最重要的 CSS3 新增實用模塊包括：背景和邊框文本效果 2D/3D 轉(zhuǎn)換動畫多列布局用戶界面 CSS3 邊框: 　　用于創(chuàng)建圓角 border...

wenshi11019 2019-04-23 13:17 評論0 收藏0