formタグに .%{STYLEGUIDE_PAGE}-form をつけるとinputタグに装飾がつきます。
フォーカスすると周りのボーダーが青色に変わります。
<form class="%{STYLEGUIDE_PAGE}-form">
<input type="email" id="email" placeholder="ex) info@hoge.com">
</form>
<div class="%{STYLEGUIDE_PAGE}-form-group">
<label for="email">メールアドレス</label>
<input type="email" id="email" placeholder="ex) info@example.com">
</div>
ラベルをブロックするとinputが下にきます。
<div class="%{STYLEGUIDE_PAGE}-form-group">
<label for="email" class="%{STYLEGUIDE_PAGE}-form-block">メールアドレス</label>
<input type="email" id="email" placeholder="ex) info@example.com">
</div>
disabled属性をつける
<input type="email" id="email" disabled> <select disabled> <option value="">---</option> <option value="...">...</option> </select>
テキストの色が赤色になります。
お名前を入力してください。
<p class="%{STYLEGUIDE_PAGE}-text-error">お名前を入力してください。</p>
inputが赤色に変わる
<input type="email" placeholder="ex) info@example.com" class="%{STYLEGUIDE_PAGE}-form-error">
大きい
小さい
<input type="email" id="largeForm" placeholder="ex) info@example.com" class="%{STYLEGUIDE_PAGE}-form-large">
<input type="email" id="smallForm" placeholder="ex) info@example.com" class="%{STYLEGUIDE_PAGE}-form-small">
<input type="text" class="%{STYLEGUIDE_PAGE}-form-width-large">
<input type="text" class="%{STYLEGUIDE_PAGE}-form-width-medium">
<input type="text" class="%{STYLEGUIDE_PAGE}-form-width-small">
<input type="text" class="%{STYLEGUIDE_PAGE}-form-width-mini">
<input type="text" class="%{STYLEGUIDE_PAGE}-form-width-full">
<input type="text" class="%{STYLEGUIDE_PAGE}-form-width-3quarters">
<input type="text" class="%{STYLEGUIDE_PAGE}-form-width-half">
<input type="text" class="%{STYLEGUIDE_PAGE}-form-width-quarter">
Internet Explorerは11以上で対応しています。
<div class="%{STYLEGUIDE_PAGE}-form-checkbox">
<input checked="checked" type="checkbox" id="input-checkbox-apple">
<label for="input-checkbox-apple">
<i class="%{STYLEGUIDE_PAGE}-ico-checkbox"></i>りんご
</label>
</div>
<input type="checkbox" id="checkbox-1-1" class="%{STYLEGUIDE_PAGE}-btn-checkbox" /><label for="checkbox-1-1">りんご</label>
<div class="%{STYLEGUIDE_PAGE}-form-radio">
<input name="custom-radio" checked="checked" type="radio" id="input-radio-udon">
<label for="input-radio-udon">
<i class="%{STYLEGUIDE_PAGE}-ico-radio"></i>うどん
</label>
</div>
<input type="radio" id="radio-1-2" name="radio-1-set" class="%{STYLEGUIDE_PAGE}-btn-radio" /><label for="radio-1-2">そば</label>
<div class="%{STYLEGUIDE_PAGE}-grid %{STYLEGUIDE_PAGE}-form">
<div class="%{STYLEGUIDE_PAGE}-col-4 %{STYLEGUIDE_PAGE}-form-action">
<span class="%{STYLEGUIDE_PAGE}-form-side">
<input name="custom-radio" checked="checked" type="radio">
</span>
<input type="email" class="%{STYLEGUIDE_PAGE}-form-width-small %{STYLEGUIDE_PAGE}-form-small">
</div>
<div class="%{STYLEGUIDE_PAGE}-col-4 %{STYLEGUIDE_PAGE}-form-action">
<span class="%{STYLEGUIDE_PAGE}-form-side">
<input name="custom-radio" checked="checked" type="radio">
</span>
<input type="email" class="%{STYLEGUIDE_PAGE}-form-width-small">
</div>
<div class="%{STYLEGUIDE_PAGE}-col-4 %{STYLEGUIDE_PAGE}-form-action">
<span class="%{STYLEGUIDE_PAGE}-form-side">
<input name="custom-radio" checked="checked" type="radio">
</span>
<input type="email" class="%{STYLEGUIDE_PAGE}-form-width-small %{STYLEGUIDE_PAGE}-form-large">
</div>
</div>
<div class="%{STYLEGUIDE_PAGE}-grid">
<div class="%{STYLEGUIDE_PAGE}-form-group %{STYLEGUIDE_PAGE}-col-6">
<div class="%{STYLEGUIDE_PAGE}-form-action">
<span class="%{STYLEGUIDE_PAGE}-form-side-btn"><button type="submit" class="%{STYLEGUIDE_PAGE}-btn">送信</button></span>
<input type="email" class="%{STYLEGUIDE_PAGE}-form-width-small">
</div>
</div>
<div class="%{STYLEGUIDE_PAGE}-form-group %{STYLEGUIDE_PAGE}-col-6">
<div class="%{STYLEGUIDE_PAGE}-form-action">
<input type="email" class="%{STYLEGUIDE_PAGE}-form-width-small">
<span class="%{STYLEGUIDE_PAGE}-form-side-btn"><button type="submit" class="%{STYLEGUIDE_PAGE}-btn">送信</button></span>
</div>
</div>
</div>