横スクロールできるけどバーなし
<div class="nav">
<div class="scroll-container">
<ul>
<li>
<select name="test">
<option value="" hidden>選択してください</option>
<option value="test1">テスト1</option>
<option value="test2">テスト2</option>
<option value="test3">テスト3</option>
</select>
</li>
<li><a href="#">HTML</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">WEBWORKS</a></li>
<li><a href="#">セキュリティ</a></li>
<li><a href="#">WORDPRESS</a></li>
<li><a href="#">FREELANCE</a></li>
<li><a href="#">その他</a></li>
</ul>
</div>
</div>
<style>
.nav {
background-color: transparent; /* 背景を透明に */
overflow-x: auto; /* 横スクロールを有効に */
overflow-y: hidden; /* 縦スクロールを無効に */
-webkit-overflow-scrolling: touch; /* 慣性スクロールを有効に */
scrollbar-width: none; /* Firefoxでスクロールバーを非表示に */
}
.nav::-webkit-scrollbar {
display: none; /* Webkitベースのブラウザでスクロールバーを非表示に */
}
.scroll-container {
display: flex;
}
.nav ul {
display: flex;
width: max-content;
margin: 0;
padding: 0;
list-style: none; /* リストのスタイルをリセット */
}
.nav ul li {
margin: 0 5px; /* ボックス間にマージンを追加 */
}
.nav ul li a {
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap; /* テキストを折り返さない */
padding: 10px 25px;
height: 50px;
font-size: 15px;
color: #000; /* テキストカラーを黒に */
text-decoration: none;
border: 1px solid #ccc; /* ボックスにボーダーを追加 */
border-radius: 5px; /* ボックスの角を丸くする */
background-color: #fff; /* ボックスの背景色を白に */
}
.nav ul li a:hover {
background-color: #cc0000;
color: #fff; /* ホバー時のテキストカラーを白に */
}
</style>
横スクロールとバーあり
<div class="cat_sch ta">
<div class="scroll-container">
<ul>
<li>
<select name="test" class="custom-select">
<option value="" hidden>話せる言語</option>
<option value="test1">テスト1</option>
<option value="test2">テスト2</option>
<option value="test3">テスト3</option>
</select>
</li>
<li>
<select name="test" class="custom-select">
<option value="" hidden>出身</option>
<option value="test1">テスト1</option>
<option value="test2">テスト2</option>
<option value="test3">テスト3</option>
</select>
</li>
<li><a href="#">SEO</a></li>
<li><a href="#">WEBWORKS</a></li>
<li><a href="#">セキュリティ</a></li>
<li><a href="#">WORDPRESS</a></li>
<li><a href="#">FREELANCE</a></li>
<li><a href="#">その他</a></li>
</ul>
</div>
</div>
<style>
.custom-select {
border: 1px solid rgba(66, 66, 66, 0.3);
font-size: 13px;
padding: 7px 30px 7px 12px;
}
.cat_sch {
background-color: transparent; /* 背景を透明に */
overflow-x: auto; /* 横スクロールを有効に */
overflow-y: hidden; /* 縦スクロールを無効に */
-webkit-overflow-scrolling: touch; /* 慣性スクロールを有効に */
}
.cat_sch::-webkit-scrollbar {
display: none; /* Webkitベースのブラウザでスクロールバーを非表示に */
}
.scroll-container {
display: flex;
}
.cat_sch ul {
display: flex;
width: max-content;
margin: 0px 0px 10px 0px;
padding: 0;
list-style: none; /* リストのスタイルをリセット */
}
.entry-content .cat_sch ul li { font-size: 13px;
margin: 0px; /* ボックス間にマージンを追加 */
}
.entry-content .cat_sch ul li a {
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap; /* テキストを折り返さない */
padding: 2px 15px;
font-size: 13px;
color: #000; /* テキストカラーを黒に */
text-decoration: none;
border: 1px solid #ccc; /* ボックスにボーダーを追加 */
border-radius: 5px; /* ボックスの角を丸くする */
background-color: #fff; /* ボックスの背景色を白に */
}
.entry-content .cat_sch ul li a:hover {
background-color: #009988;
color: #fff; /* ホバー時のテキストカラーを白に */
}
.custom-select:hover {
background-color: #009988; color: #fff;
}
</style>
コメントを残す