CSSが得意な渋谷のウェブデザイナーのウェブ開発メモ

[PR] Another American Dictionary Spanglish with us!

CSSでラジオボタンをスマホブラウザでiPhoneっぽいボタンに

ラジオボタンをiPhoneのボタンっぽく!スマホのウェブブラウザでちゃんと動くように。そこが肝心!


HTML

<ul>
    <li>
        <input type="radio" id="male" name="sex" value="男性" />
	<label for="male">男性</label>
    </li>
    <li>
        <input type="radio" id="female" name="sex" value="女性" />
        <label for="female">女性</label>
    </li>
</ul>

CSS

原理はラジオボタンの選択範囲を広げ透明にする。最低限必要なものは以下のコード。

li{
    float: left;
    position: relative;
    width: 70px;
}
li input {
    height: 100%;
    width: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
}

このやり方ではじめてスマートフォンでも動く。

チェックが入ったらlabelの背景色を変える。デザインはお好みで。

li input + label{
    color:#333;
    display:block;
    text-align:center;
    padding:5px 0;
    border: 1px solid #ddd;
    background-image:-webkit-gradient(linear,left top,left bottom,from(#F9F9F9),to(#EEEEEE));
    background:-moz-linear-gradient(#F9F9F9,#EEEEEE);
}
li:first-child input + label{
    border-radius:4px 0 0 4px;
}
li:last-child input + label{
    border-radius:0 4px 4px 0;
    border-left:none;
}
li input:checked + label{
    background-image:-webkit-gradient(linear,left top,left bottom,from(#5393C5),to(#6FACD5));
    background: -moz-linear-gradient(#5393C5, #6FACD5);
    border: 1px solid #2373A5;
    color:#fff;
}
関連記事
この記事役にたった?
管理者にだけメッセージを送る