ON/OFF 時に CSS でズレない選択肢 01
開始早々、バナー表示のシリーズを置いといて。
違うモノを持ってきた。スグに共有しておきたい個人的な理由で。まぁ、元々ココは、基本的に個人的なメモなんだが。
さて、選択肢ボタンとして、input の checkbox や radio を装飾して、というのは多々見かけるんだが、この時に、チェック OFF 時には border が無くて、ON 時に border を付ける、というのは、まぁありえる話。
これが、当たり前なんですが、そのまま使うと、表示コンテンツが、border 分動く。HTML 上の動作で、Web なので当たり前だと思ってくれりゃー良いんですが、紙脳な連中には通用しないのが現実。
「ズレないようにして」
内心「はぁぁぁぁぁぁぁぁ？ して？ ズレるのが Web の“普通”なんぢゃ！ 紙の普通を押し付けるな、ぼけぇ！」って思いつつ「ちょっと時間かかりますよ」って言って、過去は padding で上下を吸収させていた。
それが、今の職場で、スマホ画面で見た時にズレが起きる、とシツコイ輩が発生。スマホやねんから、固定されたとこで見てないんやし、Retina の1px が動いたところで、持ってる手ブレでわかるかぃな、と思いつつ。
それでも、1回目遭遇した CSS の使い回しでは、どう頑張っても不可能でタイムアップ。
2回目に遭遇した CSS で「コイツ、ズレてへんやんけ。これのことを言ってたんか」と思いつつ。（じゃぁ、過去にこういうのがあるから、って言えよ、過去の経験者なら、カス野郎が！ って、中指を心の中で立てる）
前置きが長くてスマン
ON/OFF で動かない選択肢ボタン いってみよー
<!doctype html>
<html lang="ja"><head>
<meta charset="utf-8">
<title>Tips 02</title>
<style>
body {background-color:#fff;}
section {
width: 80%;
margin:3% auto;
}
ul {list-style: none;}
input[type="checkbox"],input[type="radio"] {display: none;}/*HTML で生成するデフォルトの input を非表示*/
label {cursor: pointer;}/*クリック地点の明示*/
/*off時*/
.list li + li {margin-top: 1vw;}
.list label {
display: flex;
width: 100%;
min-height: 10vw;/*ボタン幅固定なら*/
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
font-weight: bold;
font-size: 4vw;
-webkit-font-feature-settings: 'palt';
font-feature-settings: 'palt';
line-height: 1.5;
padding: 0 2% 0 12%;/*ボタン幅ココでもOK*/
align-items: center;
vertical-align: middle;
box-sizing: border-box;
border: #fff 2px solid;/*on 表示される border を確保。利用時の背景を合わせるか背景画像の場合は 色部分を transparent で処理。ただしその場合 background が適用されるので注意！*/
border-radius: 6px;
background: #efefef;
/* background: #ffffff; */
/* background: -moz-linear-gradient(top, #ffffff 0%, #dbdbdb 100%); */
/* background: linear-gradient(to bottom, #ffffff 0%,#dbdbdb 100%);*/
/* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dbdbdb',GradientType=0 );/* グラデにするなら↑ */
box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.5);/*inset で内側に描画*/
}
/*on 時*/
.radio input[type="radio"]:checked + label,
.check input[type="checkbox"]:checked + label {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,cfeafa+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #ccffcc 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffffff 0%,#ccffcc 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffffff 0%,#ccffcc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ccffcc',GradientType=0 ); /* IE6-9 */
border: 2px solid #33cc33;/* onで border 2px表示 */
color: #33cc33;/*文字色も border と揃えるなら*/
box-shadow: 1px 1px 4px 0 #ccccff;/*内側を上書きして外側に shadow を置くなら*/
/*box-shadow: none;/*内側を消すなら*/
}
</style>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>main cont
<section id="cont01">checkbox
<ul id="listid1" class="list check">
<li><input type="checkbox" name="chk1[]" value="" id="chk-01"><label class="ans_box" for="chk-01">選択肢ボタン01</label></li>
<li><input type="checkbox" name="chk1[]" value="" id="chk-02"><label class="ans_box" for="chk-02">選択肢ボタン02</label></li>
<li><input type="checkbox" name="chk1[]" value="" id="chk-03"><label class="ans_box" for="chk-03">選択肢ボタン03</label></li>
<li><input type="checkbox" name="chk1[]" value="" id="chk-04"><label class="ans_box" for="chk-04">選択肢ボタン04</label></li>
<li><input type="checkbox" name="chk1[]" value="" id="chk-05"><label class="ans_box" for="chk-05">選択肢ボタン05</label></li>
</ul>
</section>
<section id="cont02"><br>radio
<ul id="listid2" class="list radio">
<li><input type="radio" name="chk2[]" value="" id="chk-11"><label class="ans_box" for="chk-11">選択肢ボタン11</label></li>
<li><input type="radio" name="chk2[]" value="" id="chk-12"><label class="ans_box" for="chk-12">選択肢ボタン12</label></li>
<li><input type="radio" name="chk2[]" value="" id="chk-13"><label class="ans_box" for="chk-13">選択肢ボタン13</label></li>
<li><input type="radio" name="chk2[]" value="" id="chk-14"><label class="ans_box" for="chk-14">選択肢ボタン14</label></li>
<li><input type="radio" name="chk2[]" value="" id="chk-15"><label class="ans_box" for="chk-15">選択肢ボタン15</label></li>
</ul>
</section>
</body></html>どこまでコメント入れておこうか、というのを、少々考えたのだが「コレどこから発生してるんっすか〜？」て部分があったら、コメントしてみてください。
応えられる範囲で、応えると思います。たぶん・・・知らんけど（って、関西人の伝家の宝刀なだけやから、しょっちゅう出てくると思うで。たぶんw）。
前回同様、てきとーな html ファイルで上記コードを保存してもらえれば、
というような選択肢ボタンが表示されると思う。
選択して、チェック ON になったら
こんな感じで見えてれば正解。あとはボタン幅とか文字サイズとか、色味は好きにカスタムしてちょうだい。
コメントで書いてあるけど、OFF 時には、ON 時に使う border と同じ幅のborder をページの背景色と同じ色で設定しておく。それを、ON 時には表示したい色で上書きする、ということで、上下に動かないボタンが完成。
これで文句ないやろ、紙脳ども。
Web に紙を持ち込むな。25年言い続けてるのだが、まだまだ浸透しない。
生きてる間に、画面は動くのが普通になって欲しいもんだ。
この記事が気に入ったらサポートをしてみませんか？