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