searchFromMakers.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <title>searchFromMakers</title> <style> #searchFromMakers{ display: flow-root;/*prevent margin offset*/ box-shadow: 5px 0 13px 0px rgba(71,102,102, 0.5); width: 415px; } #searchFromMakers h1{ margin: 0; margin-left: 15px; color: rgb(121, 121, 121, 0.5); } .options{ display: flex; padding-left: 10px; margin-top: 10px; } .options p{ margin: 0; padding-left: 10px; } .options select{ margin-left: 5px; color: rgb(121, 121, 121, 0.5);/*https://note.spiqa.design/select-color/#option%E3%81%ABCSS%E3%81%AF%E5%8A%B9%E3%81%8B%E3%81%AA%E3%81%84*/ } #showLine{ display: flex; background-color: rgb(121, 121, 121, 0.1); padding-left: 10px; margin-top: 20px; } .carType_mini{ width: 122px; margin: 5px; } .carType_mini img{ border: 1px solid #797979; } .lower_mini{ display: flex; justify-content: space-between; height: 20px; } .lower_mini p{ width: 100%; margin: 0; font-size: 12px; } input[type=checkbox] { display: none; } .checkbox{ box-sizing: border-box; display: inline-block; margin-right: 10px; position: relative; width: 15px; cursor: pointer; } .checkbox::before { border: 1px solid #797979; content: ''; display: block; height: 16px; left: 5px; margin-top: -8px; position: absolute; top: 50%; width: 16px; } .checkbox::after { border-right: 3px solid #ed7a9c; border-bottom: 3px solid #ed7a9c; content: ''; display: block; height: 9px; left: 10px; margin-top: -7px; opacity: 0; position: absolute; top: 50%; transform: rotate(45deg); width: 5px; } input[type=checkbox]:checked + .checkbox::after { opacity: 1; } } #optionSearch h2{/*0723 ここが効いていない*/ margin: 0; border-left: 5px solid red; padding-left: 10px; color: red; } select{ cursor: pointer; } .options, .mission{/*同じだから消せる*/ display: flex; padding-left: 10px; margin-top: 10px; } .options p{/*同じだから消せる*/ margin: 0; padding-left: 10px; } .options select{/*同じだから消せる*/ margin-left: 5px; color: rgb(121, 121, 121, 0.5);/*https://note.spiqa.design/select-color/#option%E3%81%ABCSS%E3%81%AF%E5%8A%B9%E3%81%8B%E3%81%AA%E3%81%84*/ } .mission p{/*同じだから消せる*/ padding-left: 10px; } /*toggle switch*/ .toggle { position: relative; width: 90px; height: 24px; margin-top: 15px; margin-left: 15px; user-select: none; cursor: pointer; } .toggle input[type=checkbox] { display: none; } .toggle span { position: absolute; top: 7px; font-size: 12px; font-weight: bold; line-height: 1; -webkit-transition: 0.2s ease-out; transition: 0.2s ease-out; } .toggle span:nth-of-type(1) { right: 16px; color: rgba(0, 0, 0, 0.175); } .toggle span:nth-of-type(2) { left: 16px; color: white; z-index: 2; } .toggle.checked span:nth-of-type(1) { right: 15px; color: white; z-index: 2; } .toggle.checked span:nth-of-type(2) { left: 15px; color: rgba(0, 0, 0, 0.175); } .toggle:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50px; display: block; background: #FFF; -webkit-transition: 0.2s ease-out; transition: 0.2s ease-out; border: 1px solid rgb(121, 121, 121, 0.5); } .toggle:after { content: ""; position: absolute; width: 45px; height: 24px; display: block; border-radius: 50px; background: #336666; box-shadow: 0 9px 28px -6px rgba(0, 0, 0, 0.3); -webkit-transition: 0.2s ease-out; transition: 0.2s ease-out; margin-top: 1px;/*prevent the effect of border*/ } .toggle.checked:before { background: #FFF; } .toggle.checked:after { left: 46px;/*moving*/ box-shadow: 0 9px 28px -6px rgba(0, 0, 0, 0.5); } .searchButton{/*同じから消す*/ margin: 0 auto;/*center the box*/ margin-bottom: 20px; text-align: center;/*center the a elements a*/ background: #336666; padding-top: 10px; width: 50%; height: 35px; } .searchButton a{/*同じから消す*/ text-decoration: none; color: #FFF; } .searchButton img{/*同じから消す*/ width: 15px; height: 15px; margin-left: 10px; } @media (min-width: 1025px) {/*PC版*/ } @media screen and (max-width:1024px) {/*スマホ・タブレット版*/ } </style> </head> <body> <div id="searchFromMakers"> <h1>メーカから探す</h1> <div class="options"> <p>メーカー</p> <select name="maker" onchange="changeColor(this)"> <option class="example1" value="">日産</option> <option id="nissan">日産</option> <option id="toyota">トヨタ</option> <option id="matsuda">マツダ</option> <option id="daihatu">ダイハツ</option> <option id="suzuki">スズキ</option> </select> <p>車種</p> <select name="model" onchange="changeColor(this)"> <option id="example3" value="">軽自動車</option> <option id="1500">軽自動車</option> <option id="2000">コンパクトカー</option> <option id="3000">ミニバン</option> <option id="1500">セダン</option> <option id="2000">クーペ</option> <option id="3000">ステーションワゴン</option> <option id="1500">SUV・クロカン</option> <option id="2000">オープンカー</option> <option id="3000">ワンボックス</option> </select> </div> <div id="showLine"> <div class="carType_mini"> <img src="assets/img/nissan_dayz_roox.png"> <div class="lower_mini"> <p>デイズ ルークス</p> <input type="checkbox" id="days_roox_check" name="check"><label for="days_roox_check" class="checkbox"></label> </div> </div> <div class="carType_mini"> <img src="assets/img/nissan_dayz.png"> <div class="lower_mini"> <p>デイズ</p> <input type="checkbox" id="dayz_check" name="check"><label for="dayz_check" class="checkbox"></label> </div> </div> <div class="carType_mini"> <img src="assets/img/nissan_clipper.png"> <div class="lower_mini"> <p>クリッパー</p> <input type="checkbox" id="clipper_check" name="check"><label for="clipper_check" class="checkbox"></label> </div> </div> </div> <div id="optionSearch"> <h2>オプション検索</h2> <div class="options"> <p>排気量 </p> <select name="displacement" onchange="changeColor(this)"> <option id="example2" value="">660CC</option> <option id="1500">1500CC</option> <option id="2000">2000CC</option> <option id="3000">3000CC</option> </select> </div> <div class="mission"> <p>AT/MT</p> <div class="toggle"> <input type="checkbox" name="check" /> <span>MT</span> <span>AT</span> </div> </div> </div> <div class="searchButton"> <a href="history.html"><span>この条件で探す</span><img src="assets/img/basicArrow_#cccccc.png" alt=">"/></a> </div> </div> <script type="text/javascript"> 'use strict'; //options function changeColor(hoge){ if( hoge.value == 0 ){ hoge.style.color = ''; }else{ hoge.style.color = 'black'; } } //toggle switch $(".toggle").on("click", function() { $(".toggle").toggleClass("checked"); if(!$('input[name="check"]').prop("checked")) { $(".toggle input").prop("checked", true); } else { $(".toggle input").prop("checked", false); } }); </script> </body> </html>
0 コメント