Closed hirosejn closed 7 years ago
.hjnMenuLv2 ol input { height: 12px; text-align: right; }
.hjnLabel4Input{ cursor: pointer; }
class="hjnLabel4Input:active"
.hjnMenuLv2 ol input[type="radio"]:hover, .hjnMenuLv2 ol .hjnLabel4Input:hover { background: rgba(0,0,0,0.2); } .hjnMenuLv2 ol input[type="radio"]:active, .hjnMenuLv2 ol .hjnLabel4Input:active { background: #999; }
padding: 8px 22px;
<li>
<ol>
.hjnMenuLv2 ol .hjnLabel4Input { display: inline-block; position: relative; padding-left: 1em; } .hjnMenuLv2 ol input[type="radio"] { position: absolute; top: 0; bottom: 0; left: 0; margin: auto; }
.hjnMenuLv2 ol { display: block; padding-left: 5px; margin: 2px 0; }
.hjnMenuLv2 li a { position: relative; display: block; overflow: hidden; padding: 8px 22px; text-decoration: none; color: #000; border: outset #fff;} .hjnMenuLv2 li a:active { background: #999; border: inset #fff;}
.hjnMenuLv2 li a, .hjnMenuLv2 li label { cursor: pointer; border-radius: 14px; } .hjnMenuLv2 ol input { height: 12px; text-align: right; border-radius: 5px; } .hjnMenuLv2 ol input[type="radio"], .hjnMenuLv2 ol .hjnLabel4Input { cursor: pointer; border-radius: 5px; }
ファイルを読み込むと0件となる
メニューの、日付フォーマット指定の間に、数字単位指定を配置したため、年月日指定が利かなくなった
.hjnMenuLv2 ol input { height: 12px; text-align: right; }
マウスが pointer となる箇所を、radio とradio連動ラベルのみとする.hjnLabel4Input{ cursor: pointer; }
class="hjnLabel4Input:active"
指定追加.hjnMenuLv2 ol input[type="radio"]:hover, .hjnMenuLv2 ol .hjnLabel4Input:hover { background: rgba(0,0,0,0.2); } .hjnMenuLv2 ol input[type="radio"]:active, .hjnMenuLv2 ol .hjnLabel4Input:active { background: #999; }
padding: 8px 22px;
の指定がラベルより一階層上を指定していた<li>
を<ol>
に変更し、<li>
を使っているATag用CSSと別にCSSで指定.hjnMenuLv2 ol .hjnLabel4Input { display: inline-block; position: relative; padding-left: 1em; } .hjnMenuLv2 ol input[type="radio"] { position: absolute; top: 0; bottom: 0; left: 0; margin: auto; }
行間を設定.hjnMenuLv2 ol { display: block; padding-left: 5px; margin: 2px 0; }
ボタン押下時の影がずれて見える.hjnMenuLv2 li a { position: relative; display: block; overflow: hidden; padding: 8px 22px; text-decoration: none; color: #000; border: outset #fff;} .hjnMenuLv2 li a:active { background: #999; border: inset #fff;}
inputの角を丸める.hjnMenuLv2 li a, .hjnMenuLv2 li label { cursor: pointer; border-radius: 14px; } .hjnMenuLv2 ol input { height: 12px; text-align: right; border-radius: 5px; } .hjnMenuLv2 ol input[type="radio"], .hjnMenuLv2 ol .hjnLabel4Input { cursor: pointer; border-radius: 5px; }