html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>タイトル</title> 7 <meta name="description" content="ディスクリプション" /> 8 <meta property="og:type" content="website" /> 9 <meta property="og:title" content="タイトル" /> 10 <meta property="og:image" content="/img/icon.png" /> 11 <meta property="og:url" content="http://example.net/" /> 12 <meta property="og:site_name" content="サイト名" /> 13 <meta property="og:description" content="ディスクリプション" /> 14 <meta name="robots" content="noarchive"> 15 <link rel="shortcut icon" href="/img/favicon.ico"> 16 <link rel="stylesheet" type="text/css" href="css/main.css"> 17 <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> 18 <script type="text/javascript" src="js/main.js"></script> 19 </head> 20 <body> 21 <div class="center"> 22 <select name="sources" id="sources" class="custom-select sources" placeholder="Source Type"> 23 <option value="profile">Profile</option> 24 <option value="word">Word</option> 25 <option value="hashtag">Hashtag</option> 26 </select> 27 </body> 28</html>
css
1@charset "UTF-8"; 2@import url(/css/sanitize.css); 3@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css); 4 5body { 6 background: #ededed; 7 font-family: 'Open Sans', sans-serif; 8} 9.center { 10 position: absolute; 11 display: inline-block; 12 top: 50%; left: 50%; 13 transform: translate(-50%, -50%); 14} 15 16/** Custom Select **/ 17.custom-select-wrapper { 18 position: relative; 19 display: inline-block; 20 user-select: none; 21} 22 .custom-select-wrapper select { 23 display: none; 24 } 25 .custom-select { 26 position: relative; 27 display: inline-block; 28 } 29 .custom-select-trigger { 30 position: relative; 31 display: block; 32 width: 130px; 33 padding: 0 84px 0 22px; 34 font-size: 22px; 35 font-weight: 300; 36 color: #fff; 37 line-height: 60px; 38 background: #5c9cd8; 39 border-radius: 4px; 40 cursor: pointer; 41 } 42 .custom-select-trigger:after { 43 position: absolute; 44 display: block; 45 content: ''; 46 width: 10px; height: 10px; 47 top: 50%; right: 25px; 48 margin-top: -3px; 49 border-bottom: 1px solid #fff; 50 border-right: 1px solid #fff; 51 transform: rotate(45deg) translateY(-50%); 52 transition: all .4s ease-in-out; 53 transform-origin: 50% 0; 54 } 55 .custom-select.opened .custom-select-trigger:after { 56 margin-top: 3px; 57 transform: rotate(-135deg) translateY(-50%); 58 } 59 .custom-options { 60 position: absolute; 61 display: block; 62 top: 100%; left: 0; right: 0; 63 min-width: 100%; 64 margin: 15px 0; 65 border: 1px solid #b5b5b5; 66 border-radius: 4px; 67 box-sizing: border-box; 68 box-shadow: 0 2px 1px rgba(0,0,0,.07); 69 background: #fff; 70 transition: all .4s ease-in-out; 71 72 opacity: 0; 73 visibility: hidden; 74 pointer-events: none; 75 transform: translateY(-15px); 76 } 77 .custom-select.opened .custom-options { 78 opacity: 1; 79 visibility: visible; 80 pointer-events: all; 81 transform: translateY(0); 82 } 83 .custom-options:before { 84 position: absolute; 85 display: block; 86 content: ''; 87 bottom: 100%; right: 25px; 88 width: 7px; height: 7px; 89 margin-bottom: -4px; 90 border-top: 1px solid #b5b5b5; 91 border-left: 1px solid #b5b5b5; 92 background: #fff; 93 transform: rotate(45deg); 94 transition: all .4s ease-in-out; 95 } 96 .option-hover:before { 97 background: #f9f9f9; 98 } 99 .custom-option { 100 position: relative; 101 display: block; 102 padding: 0 22px; 103 border-bottom: 1px solid #b5b5b5; 104 font-size: 18px; 105 font-weight: 600; 106 color: #b5b5b5; 107 line-height: 47px; 108 cursor: pointer; 109 transition: all .4s ease-in-out; 110 } 111 .custom-option:first-of-type { 112 border-radius: 4px 4px 0 0; 113 } 114 .custom-option:last-of-type { 115 border-bottom: 0; 116 border-radius: 0 0 4px 4px; 117 } 118 .custom-option:hover, 119 .custom-option.selection { 120 background: #f9f9f9; 121 } 122}
js
1$(".custom-select").each(function() { 2 alert("test"); 3 var classes = $(this).attr("class"), 4 id = $(this).attr("id"), 5 name = $(this).attr("name"); 6 var template = '<div class="' + classes + '">'; 7 template += '<span class="custom-select-trigger">' + $(this).attr("placeholder") + '</span>'; 8 template += '<div class="custom-options">'; 9 $(this).find("option").each(function() { 10 template += '<span class="custom-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>'; 11 }); 12 template += '</div></div>'; 13 14 $(this).wrap('<div class="custom-select-wrapper"></div>'); 15 $(this).hide(); 16 $(this).after(template); 17}); 18$(".custom-option:first-of-type").hover(function() { 19 $(this).parents(".custom-options").addClass("option-hover"); 20}, function() { 21 $(this).parents(".custom-options").removeClass("option-hover"); 22}); 23$(".custom-select-trigger").on("click", function() { 24 $('html').one('click',function() { 25 $(".custom-select").removeClass("opened"); 26 }); 27 $(this).parents(".custom-select").toggleClass("opened"); 28 event.stopPropagation(); 29}); 30$(".custom-option").on("click", function() { 31 $(this).parents(".custom-select-wrapper").find("select").val($(this).data("value")); 32 $(this).parents(".custom-options").find(".custom-option").removeClass("selection"); 33 $(this).addClass("selection"); 34 $(this).parents(".custom-select").removeClass("opened"); 35 $(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text()); 36});
cssは背景色は変わるのですが、コンボボックスの色、大きさなどが変わらないです。
jsはalertを仕込んでみたのですが表示されなかったので読み込みすらされていない状態です。
確認環境
IE11
Edge
jQuery3.3.1
----------------------------追記----------------------------
解決ソース
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>タイトル</title> 7 <meta name="description" content="ディスクリプション" /> 8 <meta property="og:type" content="website" /> 9 <meta property="og:title" content="タイトル" /> 10 <meta property="og:image" content="/img/icon.png" /> 11 <meta property="og:url" content="http://example.net/" /> 12 <meta property="og:site_name" content="サイト名" /> 13 <meta property="og:description" content="ディスクリプション" /> 14 <meta name="robots" content="noarchive"> 15 <link rel="shortcut icon" href="/img/favicon.ico"> 16 <link rel="stylesheet" type="text/css" href="css/main.css"> 17 </head> 18 <body> 19 <div class="center"> 20 <div class="custom-select-wrapper"> 21 <select name="sources" class="custom-select sources" id="sources" style="display: none;" placeholder="Source Type"> 22 <option value="profile">Profile</option> 23 <option value="word">Word</option> 24 <option value="hashtag">Hashtag</option> 25 </select> 26 </div> 27 </div> 28 <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> 29 <script type="text/javascript" src="js/main.js"></script> 30 </body> 31</html>
js
1alert("test"); 2$(".custom-select").each(function () { 3 var classes = $(this).attr("class"), 4 id = $(this).attr("id"), 5 name = $(this).attr("name"); 6 alert("test"); 7 var template = '<div class="' + classes + '">'; 8 template += '<span class="custom-select-trigger">' + $(this).attr("placeholder") + '</span>'; 9 template += '<div class="custom-options">'; 10 $(this).find("option").each(function () { 11 template += '<span class="custom-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>'; 12 }); 13 template += '</div></div>'; 14 $(this).wrap('<div class="custom-select-wrapper"></div>'); 15 $(this).hide(); 16 $(this).after(template); 17}); 18$(".custom-option:first-of-type").hover(function () { 19 $(this).parents(".custom-options").addClass("option-hover"); 20}, function () { 21 $(this).parents(".custom-options").removeClass("option-hover"); 22}); 23$(".custom-select-trigger").on("click", function () { 24 $('html').one('click', function () { 25 $(".custom-select").removeClass("opened"); 26 }); 27 $(this).parents(".custom-select").toggleClass("opened"); 28 event.stopPropagation(); 29}); 30$(".custom-option").on("click", function () { 31 $(this).parents(".custom-select-wrapper").find("select").val($(this).data("value")); 32 $(this).parents(".custom-options").find(".custom-option").removeClass("selection"); 33 $(this).addClass("selection"); 34 $(this).parents(".custom-select").removeClass("opened"); 35 $(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text()); 36}); 37//# sourceURL=pen.js
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/24 01:52
2018/09/24 03:31 編集
2018/09/24 07:27
2018/09/24 07:30
2018/09/24 07:40 編集
2018/09/24 07:50