使用chrome除錯，如下圖，在setting裡勾選框中選項
可以看到video標籤的控制欄dom結構，如下圖，修改對應的樣式即可
//全屏按鈕
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-play-button
//進度條
video::-webkit-media-controls-timeline
//**的當前時間
video::-webkit-media-controls-current-time-display
//剩餘時間
video::-webkit-media-controls-time-remaining-display
//音量按鈕
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-toggle-closed-captions-button
//音量的控制條
video::-webkit-media-controls-volume-slider
//所有控制項
修改video標籤自帶按鈕的預設樣式
我們來看一下 video 的內部構造 chrome 下，開發者工具 setting preferences elements 勾選 show user agent shadow dom 再回來看，已經可以看到 video 的內部結構了 瞄一眼，有沒有看到很熟悉的 webkit media contr...
清除標籤的預設樣式
許多標籤多帶有預設樣式，有時候當我們使用它們時並不需要這些預設樣式，所以就要清除預設樣式。下面是幾種常見的方法 1 清除缺省內外邊距 html,body,div,ul,li,h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ol,form,input,textarea,th,td,selec...
HTML的各個標籤的預設樣式
head body button,textarea,input,object,select ol,ul,dir,menu,dd i,cite,em,var,address 塊級元素 html,body,div,ol,p,ul,h1,h2,h3,h4,h5,h6,address,blockquote,...