コピペで簡単！ formのinputやselectなどのcssサンプル集 | CSS | Web関連

2018/02/13

Category :

Tags :

ラフデザイン通りにformの各パーツをCSSで装飾する。
よく使い回すので一度、自分自身も再確認のためまとめる。

サンプルを見る（デフォルトの状態）

サンプルを見る（CSSでリデザイン後）

初期化

各ブラウザ毎に見た目が異なるので初期化が必須。

各パーツ初期化

button、option、select、textarea、inputの初期化。
select要素の矢印を消すのが少々面倒、特にie9。
ie9はcssのプロパティの-ms-expandが効かないので矢印を消す事が出来ずcssで矢印を見えなくするという事で対応。（後述のCSS）

/************************************
form
*************************************/

/*
reset
***********************/

button,
option,
select,
textarea,
input[type="button"],
input[type="submit"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="text"],
input[type="select"],
input[type="option"],
input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
    border: none;
    outline: 0;
    margin: 0;
    background: #fff;
}

/* デフォルトのradio、checkboxは非表示 */

input[type=radio],
input[type=checkbox] {
    display: none;
}

/* for firefox */

select {
    text-indent: 0.01px;
    text-overflow: '';
}

/* for ie10 ie11 ie系のプルダウンの矢印を消す ie9は非対応 */

select::-ms-expand {
    display: none;
}

CSSでデザイン変更

初期化が完了したところでラフにあったデザインに変更。

テキスト（text）・テキストエリア（textarea）

テキスト関連の装飾
特に難しい事はなし。

<input type="text" name="formName" id="formName" placeholder="" value="" size="50" maxlength="50">

<textarea name="formContent" id="formContent" cols="40" rows="3"></textarea>

/*
input[type="text"] textarea
input[type="●●●"] 適宜追加
*/

textarea,
input[type="number"],
input[type="text"] {
    width: 100%;
    padding: 10px 15px;
    font-size: 14px;
    font-size: 1.4rem;
    border: 1px solid #ccc;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
}

textarea {
    height: 100px; /* お好みの高さに */
}

/* フォーカス時の色変更 */

textarea:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="text"]:focus {
    border: 1px solid #333;
}

ラジオボタン（radio）・チェックボックス（checkbox）

各ブラウザでデフォルトのデザインが異なるラジオボタン・チェックボックスはCSSのdisplay: none;で非表示。
label要素のbefore、afterでデザイン通りに変更。

/* ラジオボタン */

<ol class="form-radio">
    <li><input type="radio" name="radioSample" id="radio01" value="1" checked="checked"><label for="radio01">ラジオボタン01</label></li>
    <li><input type="radio" name="radioSample" id="radio02" value="2"><label for="radio02">ラジオボタン02</label></li>
</ol>

/* チェックボックス */

<ol class="form-checkbox">
    <li><input type="checkbox" name="checkSample" id="check01" value="1" checked="checked"><label for="check01">チェックボックス01</label></li>
    <li><input type="checkbox" name="checkSample" id="check02" value="2"><label for="check02">チェックボックス02</label></li>
</ol>

/* ラジオボタン */

.form-radio input[type=radio]+label {
    position: relative;
    display: inline-block;
    font-size: 12px;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 9px 5px 8px 28px;
    margin-right: 0px;
}

.form-radio input[type=radio]+label::before,
.form-radio input[type=radio]+label::after {
    position: absolute;
    display: block;
    content: '';
    top: 50%;
    left: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
}

.form-radio input[type=radio]+label::before {
    width: 22px;
    height: 22px;
    margin-top: -12px;
    background: #FFF;
    border: 1px solid #ccc;
}

.form-radio input[type=radio]+label::after {
    left: 6px;
    width: 10px;
    height: 10px;
    margin-top: -6px;
    background: #f4f4f4;
}

.form-radio input[type=radio]:checked+label::after {
    background: #333;
}

/* チェックボックス */

.form-checkbox label {
    position: relative;
    display: inline-block;
    font-size: 12px;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 6px 5px 8px 30px;
}

.form-checkbox label::before,
.form-checkbox label::after {
    position: absolute;
    display: block;
    content: '';
    top: 50%;
    left: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.form-checkbox label::before {
    width: 22px;
    height: 22px;
    margin-top: -12px;
    background: #FFF;
    border: 2px solid #ccc;
}

.form-checkbox input[type=checkbox]+label::after {
    width: 24px;
    height: 24px;
    top: 2px;
}

.form-checkbox input[type=checkbox]:checked+label::after {
    position: absolute;
    display: block;
    content: '';
    background: url(../img/icon_check.png) 0 0 no-repeat;
    background-size: 24px 24px;
    left: -1px;
    top: -1px;
}

プルダウンメニュー（select）

少々やっかい。
ie9のみプルダウンのwidthを120%にして親要素でoverflow: hidden;して矢印を見えなくするというhack。
after要素で下向き矢印をデザイン（今回はCSSのみで）
矢印のafter要素がクリックできなくなってしまうのでpointer-events: none;でクリック出来るようにする。

<div class="form-select">
    <select name="selectSample" id="selectSample">
        <option value="">選択してください</option>
        <option value="プルダウン01">プルダウン01</option>
        <option value="プルダウン02">プルダウン02</option>
        <option value="プルダウン03">プルダウン03</option>
        <option value="プルダウン04">プルダウン04</option>
    </select>
</div>

.form-select {
    display: block;
    position: relative;
    width: 100%;
    height: 38px;
    font-size: 14px;
    font-size: 1.4rem;
    border: 1px solid #ccc;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    overflow: hidden;
}

.form-select:after {
    position: absolute;
    display: block;
    content: '';
    width: 0;
    height: 0;
    /* ここで下向き矢印指定　今回はCSSで */
    border-top: 6px solid transparent;
    border-left: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #333;
    top: 50%;
    right: 10px;
    margin-top: -3px;
    pointer-events: none;/* クリック出来るよう */
}

.form-select select {
    width: 100%;
    height: 35px;
    font-size: 14px;
    font-size: 1.4rem;
    padding: 0 10px;
    border: none;
    position: relative;
}

/* ie9対策 */

.form-select select:not(:target) {
    width: 120% \9;
}

ボタン（button）

最近はレガシーIE対応がない限りbuttonで作成している。
デザイン通りに柔軟な対応が出来てロールオーバーアニメーションも出来るので重宝。

<button type="submit" name="submitConfirm" value="confirm">確認画面へ</button>

button {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    width: 100%;
    height: 44px;
    display: block;
    position: relative;
    background: #111;
    color: #fff;
    text-align: center;
    border: 1px solid #111;
    cursor: pointer;
}

button:before {
    position: absolute;
    display: block;
    content: '';
    width: 98%;
    height: 3px;
    background: #ccc;
    bottom: -4px;
    left: 1%;
}

@media print,screen and (min-width: 1024px) {
    button {
        -webkit-transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
        -moz-transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
        -ms-transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
        transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    }
    button:hover {
        color: #111;
        background: #fff;
    }
}

その他

対応が必要なケースのみ。
記述していても特に問題はないかと思われます。

placeholderの文字の色とサイズ

/* Google Chrome, Safari, Opera 15+, Android, iOS */

::-webkit-input-placeholder {
    color: #ccc;
    font-size: 12px;
    font-size: 1.2rem;
}

/* Firefox 18- */

:-moz-placeholder {
    color: #ccc;
    opacity: 1;
    font-size: 12px;
    font-size: 1.2rem;
}

/* Firefox 19+ */

::-moz-placeholder {
    color: #ccc;
    opacity: 1;
    font-size: 12px;
    font-size: 1.2rem;
}

/* IE 10+ */

:-ms-input-placeholder {
    color: #ccc;
    font-size: 12px;
    font-size: 1.2rem;
}

autofill（背景色が黄色になるの）対策

Chromeでinput要素の背景色が黄色になるのを解除。
backgroundプロパティをこねくりまわしても変更できず現状、背景色の上に白いshadowを乗っけてhackして対応するしかないみたい。

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

スマホでは数字のみ入力

入力項目が数字の場合は

inputのtypeをnumberにする

をする事によりスマホでは文字変換させずに直接数字を入力することが可能に。

<input type="text" name="numTxt" id="numTxt" placeholder="" value="" size="50" maxlength="6" class="jsSpNumber" pattern="[0-9]*">

/* この箇所はスマホ判別してスマホのみ適応 */
$('.jsSpNumber').each(function(i) {
    $(this).prop('type', 'number');
});

※PCではnumberにしたくないのでスマホのみ適用

以上。
あとはサイトのテイストに合わせてデザインを適宜変更。

※ソースの流用、改変は自由ですが自己責任とさせていただきます。

トラックバック URL

https://keprate.com/web/css/form/trackback/