自定義滾動條

2021-10-01 11:09:59 字數 1188 閱讀 2529

不主攻前端,最近因為工作原因做了幾個小樣例,已被以後用 ,樣例中用到的銀行就不上傳了

輸入框1:

輸入框2:

下拉選項:

選項1選項2

選項3選項4

選項5選項6

選項7選項8

選項9 

確認

/**按鈕樣式*/

.global_custom-btn

.global_custom-btn:hover

/**表單樣式*/

.global_div_inline

.global_div_inline div,span,input

/**輸入框樣式*/

.global_input_outer

.global_input_outer:hover

.global_input_inner

/**下拉框樣式*/

.global_select

/**列表*/

.global_ul_list

/**定義滾動div*/

.global_ul_wrap

/**定義了滾動條整體的樣式*/

.global_ul_wrap::-webkit-scrollbar

/**滾動條滑塊部分*/

.global_ul_wrap::-webkit-scrollbar-thumb

/**滾動條裡面軌道*/

.global_ul_wrap::-webkit-scrollbar-track

.global_ul_wrap_ul

.global_ul_wrap_ul li

.global_ul_wrap_ul li span

.global_ul_li

.global_ul_li_title_img

.global_ul_li_title

.global_bank_li

.global_bank_li p

.global_ul_li button

.global_ul_li button:hover

.el-button--primary

自定義滾動條

滾動條從外觀來看是由兩部分組成 1.滑塊 可以滑動的部分 2.軌道 即滑塊的軌道,一般來說滑塊的顏色比軌道的顏色深。滾動條的css樣式主要有三部分組成 1 webkit scrollbar 定義了滾動條整體的樣式 可以改變滾動條的寬度 2 webkit scrollbar thumb 滑塊部分 可以...

自定義滾動條

body,div 2 某些樣式需ie5.5 才能支援 1 overflow內容溢位時的設定 設定被設定物件是否顯示滾動條 overflow x水平方向內容溢位時的設定 overflow y垂直方向內容溢位時的設定 以上三個屬性設定的值為visible 預設值 scroll hidden auto。2...

css自定義滾動條

1 在谷歌瀏覽器和safari中可直接設定,如果想單獨對某個盒子新增,直接在偽類前面加上選擇器即可 滾動條的軌道 滾動條的滑塊按鈕 webkit scrollbar track,webkit scrollbar thumb 滾動條的上下兩端的按鈕 webkit scrollbar button we...