html
4/05/2020
input range option label
input range option label
input range拖動實時觸發事件
<!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: -15px 0 0 0;height:55px;} #volumeBox { width:410px;font-size: 15px; margin: -25px 0 0 200px; 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>
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;} #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
#html input range option label
#html input range拖動實時觸發事件
沒有留言:
發佈留言
較新的文章
較舊的文章
首頁
訂閱：
發佈留言 (Atom)
343434 123 456 3434 343434
字型樣式
字型樣式 ＜b>bold 粗體 ＜/b> bold 粗體 ＜strong>important text 強調 ＜/strong> important text 強調 ＜em>marks text 強調＜/em> marks ...
Google 試算表 / 表格 建立免費雲端資料庫 第 3 步 表格回應 試算表 換 JSON格式
Google 試算表 / 表格 建立免費雲端資料庫 第 2 步 表格回應 試算表 換 JSON格式 1) Google 提供 把 試算表 換 JSON格式 ， https://spreadsheets.google.com/feeds/list/ 1PRmmN4Y...
連結屬性， 超連結的語法
HTML </a> href 連結屬性， 超連結的語法 <a href="連結網址" target="連結目標" title="替代文字">顯示內容</a> target=...
沒有留言:
發佈留言