html
html 測試 左單右單
html 測試 單入單出
html 測試 上入下出
html 測試 左入右出
2018年7月11日 星期三
input range option label
input range option label
改變 HTML5 range 樣式的兩種方法
range 原理 :
首先要來寫一個 range 出來，min 是最小值，max 是最大值，step 是每隔間距，value 是預設數值：
<input type="range" step="10" list="tickmarks" oninput="showVal(this.value)">
<!DOCTYPE html><style>#range { width:200px;border: 1px solid black; transform-origin: 100px 100px; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } #range input { width:99%;margin: 10px 0 0 0;height:55px;} #volumeBox { width:410px;font-size: 15px; transform-origin: -210px -165px; transform: rotate(90deg); position: absolute; } #tickmarks { width:103%;margin: 0 0 0 0;display: flex;} #tickmarks option{width:410px;font-size: 15px; transform-origin: 10px 10px; transform: rotate(90deg); } </style> <div id="range"> <datalist id="tickmarks"> <option value="0" >0</option> <option value="10"></option> <option value="20">20</option> <option value="30"></option> <option value="40">40</option> <option value="50"></option> <option value="60">60</option> <option value="70"></option> <option value="80">80</option> <option value="90"></option> <option value="100">100</option> </datalist> <input type="range" step="10" list="tickmarks" oninput="showVal(this.value)"><span id="volumeBox" >50</span><div> <script>function showVal(newVal){ document.getElementById("volumeBox").innerHTML=newVal; } </script>
00
<!DOCTYPE html><style>#range { width:400px;border: 1px solid black;} #range input { width:99%;margin: 0 0 0 0;height:20px;} #tickmarks{ width:103%;margin: 0 0 0 0;display: flex;} #tickmarks option{width:410px;font-size: 15px;} </style> <div id="range"> <datalist id="tickmarks"> <option value="0" >0</option> <option value="10"></option> <option value="20">20</option> <option value="30"></option> <option value="40">40</option> <option value="50"></option> <option value="60">60</option> <option value="70"></option> <option value="80">80</option> <option value="90"></option> <option value="100">100</option> </datalist> <input type="range" step="10" list="tickmarks" oninput="showVal(this.value)"><span id="volumeBox" >50</span><div> <script>function showVal(newVal){ document.getElementById("volumeBox").innerHTML=newVal; } </script>
00
<!DOCTYPE html><style>#range { width:400px;border: 1px solid black;} #range input {width:99%;-webkit-appearance: none; background: rgba(0%,0%,0%,0); margin: 0 0 0 0;display: flex;height:20px;} #tickmarks{ width:103%;margin: 0 0 0 0;display: flex;} #tickmarks option{width:410px;font-size: 15px;} input[type=range]:focus { outline: none;} /* --------------- Google Chrome ------------------ */ #range input::-webkit-slider-runnable-track { width: 100%; height: 3px; background: #fff; border: 1px solid #39404D; } #range input::-webkit-slider-thumb { border: 3px solid black; border-radius:50px 50px 0px 0px; background-color: coral; height:25px; width: 20px; cursor: pointer; -webkit-appearance: none;margin: -15px 0 0 0;} /* --------------- Firefox ------------------ */ #range input::-moz-range-track { width: 100%; height: 3px; background: #fff; border: 1px solid #39404D } #range input::-moz-range-thumb { border: 3px solid black; border-radius:50px 50px 0px 0px; background-color: coral; height:25px; width: 10px; cursor: pointer; -moz-appearance: none;} /* --------------- Microsoft Edge ------------------ */ input[type=range]::-ms-track { width: 100%; height: 3px; background: #fff; border: 1px solid #39404D;} #range input::-ms-thumb { border: 1px solid black; border-radius:50px 50px 0px 0px; background-color: coral; height:20px; width: 15px; cursor: pointer; margin: 1px 0 0 0; -webkit-appearance: none;} #range input::-ms-fill-lower { background: #fff;height:2px; border: 1px solid #39404D; border-radius: 2px; } #range input::-ms-fill-upper { background: #fff;height:2px; border: 1px solid #39404D; border-radius: 2px; } </style> <div id="range"> <datalist id="tickmarks"> <option value="0" >0</option> <option value="10"></option> <option value="20">20</option> <option value="30"></option> <option value="40">40</option> <option value="50"></option> <option value="60">60</option> <option value="70"></option> <option value="80">80</option> <option value="90"></option> <option value="100">100</option> </datalist><input type="range" step="10" list="tickmarks" oninput="showVal(this.value)"><span id="volumeBox" >50</span><div> <script>function showVal(newVal){ document.getElementById("volumeBox").innerHTML=newVal; } </script>
22
<!DOCTYPE html><style>#range { width:400px;border: 1px solid black;} #range input {width:99%;-webkit-appearance: none; background: rgba(0%,0%,0%,0); margin: 0 0 0 0;display: flex;height:20px;} #tickmarks{ width:103%;margin: 0 0 0 0;display: flex;} #tickmarks option{width:410px;font-size: 15px;} #range input:focus { outline: none;} /* --------------- Google Chrome ------------------ */ #range input::-webkit-slider-runnable-track { width: 100% ; height: 3px; background: #fff; border: 1px solid #39404D; } #range input::-webkit-slider-thumb { width: 0 ; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 30px solid #232323; cursor: pointer; -webkit-appearance: none; margin: -15px 0 0 0;} /* --------------- Firefox ------------------ */ #range input::-moz-range-track { width: 0 ; height: 0; } #range input::-moz-range-thumb { width: 0 ; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 30px solid #232323; cursor: pointer; -webkit-appearance: none ; margin: -15px 0 0 0;} /* --------------- Microsoft Edge ------------------ */ #range::-ms-track { width: 100% ; height: 3px; background: #fff ; border: 1px solid #39404D;} #range input::-ms-thumb { width: 0 ; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 30px solid #232323; cursor: pointer; -webkit-appearance: none; margin: 7px 0 0 0;} #range input::-ms-fill-lower { background: #fff;height:2px; border: 1px solid #39404D; border-radius: 2px; } #range input::-ms-fill-upper { background: #fff;height:2px; border: 1px solid #39404D; border-radius: 2px; } </style> <div id="range"> <datalist id="tickmarks"> <option value="0" >0</option> <option value="10"></option> <option value="20">20</option> <option value="30"></option> <option value="40">40</option> <option value="50"></option> <option value="60">60</option> <option value="70"></option> <option value="80">80</option> <option value="90"></option> <option value="100">100</option> </datalist><input type="range" step="10" list="tickmarks" oninput="showVal(this.value)"><span id="volumeBox" >50</span><div> <script>function showVal(newVal){ document.getElementById("volumeBox").innerHTML=newVal; } </script>
00
沒有留言:
張貼留言
較新的文章
較舊的文章
首頁
訂閱：
張貼留言 (Atom)
沒有留言:
張貼留言