Q&A
どうもありがとうございます！それも試してみたいと思います！
セレクトボックスの初期設定を appearance:none; で一度無効にし,疑似要素で矢印のデザインを変えたいと思っております。
しかし、写真のようにセレクトボックスの外にはみ出して表示されてしまいます。この▼をセレクトボックスの中の右端に入れたいのですが、方法がわかりません。分かる人がいたら、ぜひ教えて頂けると非常に助かります。
html
1<!doctype html> 2 <html> 3 <head> 4 <title>模写１</title> 5 <meta charset="utf-8"> 6 <link rel="stylesheet" href="style7.css"> 7 </head> 8 9 10<body> 11 <div class="box"> 12 <select class="place"> 13 <option>東京</option> 14 <option>神奈川</option> 15 <option>栃木</option> 16 <option>福岡</option> 17 </select> 18 </div> 19 20</body> 21</html>
css
1.box::after{ 2 content:'▼'; 3} 4 5.place{ 6 width: 200px; 7 -webkit-appearance: none; 8 -moz-appearance: none; 9 appearance: none; 10}
回答2件
0
擬似要素のpositionをabsoluteにして、top,leftなどで位置を調整されてはいかがでしょうか
投稿2020/05/04 09:43
総合スコア471
0
ベストアンサー
時間がたっているので解決済みかもしれませんが。
このような感じではどうでしょうか？
.box::after{
content:'▼';
position: relative;
}
.place{
width: 200px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: absolute;
top: 5px;
right: 10px;
}
投稿2020/05/19 03:21
総合スコア87
divの幅もselectの幅と同じにしないと外にはみ出てしまうので気をつけてください。
あくまでもdivの擬似要素で表示させていますので。
頑張ってくださいね！
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/05/05 02:47