<input placeholder="一行テキスト　text" type="text">
<input placeholder="パスワード　password" type="password">
<input placeholder="検索キーワード　search" type="search">
<input placeholder="電話番号　tel" type="tel">
<input placeholder="URL　url" type="url">
<input placeholder="メールアドレス　email" type="email">
<input placeholder="日時（タイムゾーン有）　datetime" type="datetime">
<input placeholder="日時（タイムゾーン無）　datetime-local" type="datetime-local">
<input placeholder="日　date" type="date">
<input placeholder="月　month" type="month">
<input placeholder="週　week" type="week">
<input placeholder="時間（タイムゾーン無）　time" type="time">
<inptu placeholder="数値　number" type="number">
<textarea placeholder="テキストエリア入力"></textarea>
<input type="checkbox" name="checksample" id="checksample"><label for="checksample">チェックボックス：：＜label＞タグに id+for で紐づけるタイプ</label>
<label><input type="checkbox" name="checksample"><span>チェックボックス：全体を＜label＞タグで囲み、テキストを＜span＞で囲むタイプ</span></label>
<input type="radio" name="radiosample" id="radiosample"><label for="radiosample">ラジオボタン：＜label＞タグに id+for で紐づけるタイプ</label>
<label><input type="radio" name="radiosample"><span>ラジオボタン：全体を＜label＞タグで囲み、テキストを＜span＞で囲むタイプ</span></label>
<label class="select">
    <select></select>
</label>
<select multiple=""></select></inptu>

/* ====================================================
　フォームパーツ
==================================================== */
input[type="text"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="email"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="number"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #999999;
    border-radius: 2px;
    background-color: #ffffff;
    max-width: 100%;
    padding: 0.25em 0.5em;
    font-size: 1rem;
    color: #666 !important;
    font-family: "游ゴシック Medium", "YuGothic Medium", "游ゴシック体", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}
select,
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #999999;
    border-radius: 2px;
    background-color: #ffffff;
    max-width: 100%;
    padding: 0.25em 0.5em;
    font-size: 1rem;
    color: #666 !important;
    font-family: "游ゴシック Medium", "YuGothic Medium", "游ゴシック体", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}
input[type="text"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="email"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="number"] { height: 2.25em; }
textarea {
    width: 100%;
    height: 6em;
}
select { padding-right: 1.75em; }
select:not([multiple]) {
    box-shadow: none;
    background: -moz-linear-gradient(top, white 0%, rgba(0, 0, 0, 0.15) 100%);
    background: -webkit-linear-gradient(top, white 0%, rgba(0, 0, 0, 0.15) 100%);
    background: linear-gradient(to bottom, white 0%, rgba(0, 0, 0, 0.15) 100%);
    margin: 0;
}
-webkit-input-placeholder,
-ms-input-placeholder,
-moz-placeholder { color: #999; }
input[type="text"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="email"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="number"]:focus {
    border-color: #f00;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.6);
}
select:focus,
textarea:focus {
    border-color: #f00;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.6);
}
select:not([multiple]):focus { box-shadow: none; }
label.select {
    display: inline-block;
    position: relative;
    line-height: 0;
}
label.select:before,
label.select:after {
    display: inline-block;
    position: absolute;
    font-size: 0.5rem;
}
label.select:before {
    content: "";
    border-left: 1px solid #999999;
    right: 3em;
    height: 100%;
}
label.select:after {
    pointer-events: none;
    content: "▼";
    top: 50%;
    transform: translateY(-50%);
    right: 1em;
    line-height: 1;
    color: #777777;
}
input[type="checkbox"],
input[type="radio"] { display: none; }
input[type="checkbox"] + label,
input[type="checkbox"] + span {
    position: relative;
    padding-left: 1.5em;
    cursor: pointer;
}
input[type="radio"] + label,
input[type="radio"] + span {
    position: relative;
    padding-left: 1.5em;
    cursor: pointer;
}
input[type="checkbox"] + label:before,
input[type="checkbox"] + span:before,
input[type="radio"] + label:before,
input[type="radio"] + span:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 0.25em;
    transform: translateY(-50%);
    font-family: FontAwesome;
}
input[type="checkbox"] + label:before,
input[type="checkbox"] + span:before { content: "\f096"; }
input[type="radio"] + label:before,
input[type="radio"] + span:before { content: "\f10c"; }
input[type="checkbox"]:checked + label:before,
input[type="checkbox"]:checked + span:before { content: "\f046"; }
input[type="radio"]:checked + label:before,
input[type="radio"]:checked + span:before { content: "\f192"; }
@media screen and (max-width: 767px) {
input[type="checkbox"] + label,
input[type="checkbox"] + span,
input[type="radio"] + label,
input[type="radio"] + span {
    display: block;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}
input[type="checkbox"]:checked + label,
input[type="checkbox"]:checked + span,
input[type="radio"]:checked + label,
input[type="radio"]:checked + span { background-color: #f0f0ff; }
}

//入力枠スタイル
@mixin formPartsStyle {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow:inset 1px 1px 3px rgba(0,0,0,0.1);
    border:1px solid #999999;
    border-radius:2px;
    background-color:#ffffff;
    max-width: 100%;
    padding: 0.25em 0.5em;
    font-size:1rem;
    color:$text_color !important;
    font-family:$base_font_family_sans;
}
//入力枠スタイル（Focus）
@mixin formForcusStyle {
    border-color:#f00;
    box-shadow:inset 1px 1px 3px rgba(0,0,0,0.6);
}
//入力例、Placeholder スタイル
@mixin formPlaceholderText {
    color:#999;
}
//チェックボックス　デフォルト
@mixin checkMarkDef {content:"\f096";}
//チェックボックス　チェックマーク
@mixin checkMarkCheck {content:"\f10c";}
//ラジオボタン　デフォルト
@mixin radioMarkDef {content:"\f046";}
//ラジオボタン　チェックマーク
@mixin radioMarkCheck {content:"\f192";}
//チェック・ラジオボタン　チェック色
@mixin formRadioCheckColor {
    background-color:#f0f0ff;
}
//================　設定ここまで　=================
// ====================================================
// 　入力枠基本スタイル
// ====================================================
input {
    &[type="text"],
    &[type="password"],
    &[type="search"],
    &[type="tel"],
    &[type="url"],
    &[type="email"],
    &[type="datetime"],
    &[type="datetime-local"],
    &[type="date"],
    &[type="month"],
    &[type="week"],
    &[type="time"],
    &[type="number"]{
        @include formPartsStyle;
    }
}
select,
textarea {
    @include formPartsStyle;
}
input {
    &[type="text"],
    &[type="password"],
    &[type="search"],
    &[type="tel"],
    &[type="url"],
    &[type="email"],
    &[type="datetime"],
    &[type="datetime-local"],
    &[type="date"],
    &[type="month"],
    &[type="week"],
    &[type="time"],
    &[type="number"]{ height: 2.25em; }
}
textarea {
    width: 100%;
    height: 6em;
}
select {
    padding-right:1.75em;
    &:not([multiple]) {
        box-shadow: none;
        background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0.15) 100%);
        background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0.15) 100%);
        background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0.15) 100%);
        margin: 0;
    }
}
// ====================================================
// 　placeHolderスタイル
// ====================================================
-webkit-input-placeholder,
-ms-input-placeholder,
-moz-placeholder {@include formPlaceholderText;}
// ====================================================
// 　選択時スタイル
// ====================================================
input {
    &[type="text"]:focus,
    &[type="password"]:focus,
    &[type="search"]:focus,
    &[type="tel"]:focus,
    &[type="url"]:focus,
    &[type="email"]:focus,
    &[type="datetime"]:focus,
    &[type="datetime-local"]:focus,
    &[type="date"]:focus,
    &[type="month"]:focus,
    &[type="week"]:focus,
    &[type="time"]:focus,
    &[type="number"]:focus {
        @include formForcusStyle; 
    }
}
select:focus,
textarea:focus {
    @include formForcusStyle;
}
select:not([multiple]):focus { box-shadow: none; }
// ====================================================
// 　セレクトメニュースタイル
// ====================================================
label.select {
    display: inline-block;
    position: relative;
    line-height: 0;
    &:before, &:after {
        display: inline-block;
        position: absolute;
        font-size: 0.5rem;
    }
    &:before {
        content: "";
        border-left: 1px solid #999999;
        right: 3em;
        height: 100%;
    }
    &:after {
        pointer-events: none;
        content: "▼";
        top: 50%;
        transform: translateY(-50%);
        right: 1em;
        line-height: 1;
        color: #777777;
    }
}
// ====================================================
// 　ラジオボタン・チェックボックス
// ====================================================
input {
    &[type="checkbox"],
    &[type="radio"] {
        display: none;
    }
    &[type="checkbox"] + {
        label,
        span {
            position: relative;
            padding-left: 1.5em;
            cursor: pointer;
        }
    }
    &[type="radio"] + {
        label,
        span {
            position: relative;
            padding-left: 1.5em;
            cursor: pointer;
        }
    }
    &[type="checkbox"] + label:before,
    &[type="checkbox"] + span:before,
    &[type="radio"] + label:before,
    &[type="radio"] + span:before {
        content: "";
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 0.25em;
        transform:translateY(-50%);
        font-family: FontAwesome;
    }
    &[type="checkbox"] + label:before,
    &[type="checkbox"] + span:before {@include checkMarkDef;}
    
    &[type="radio"] + label:before,
    &[type="radio"] + span:before {@include checkMarkCheck;}
    &[type="checkbox"]:checked + label:before,
    &[type="checkbox"]:checked + span:before {@include radioMarkDef;}
    
    &[type="radio"]:checked + label:before,
    &[type="radio"]:checked + span:before {@include radioMarkCheck;}
}
@media screen and (max-width: 767px) {
    // ====================================================
    // 　xs時　ラジオボタン・チェックボックス　ラベル範囲
    // ====================================================
    input {
        &[type="checkbox"] + label,
        &[type="checkbox"] + span,
        &[type="radio"] + label,
        &[type="radio"] + span {
            display: block;
            padding-top:0.5em;
            padding-bottom:0.5em;
        }
        &[type="checkbox"]:checked + label,
        &[type="checkbox"]:checked + span,
        &[type="radio"]:checked + label,
        &[type="radio"]:checked + span {
            @include formRadioCheckColor;
        }
    }
}