Asairo Design

デザイン制作チーム 浅色デザインオフィシャルサイト。web関連やメモの置き場所。熊本県出身のweb制作者。たまに小説。

WEB CSS

チェックボックス CSSでのみ装飾 サンプル2

投稿日:

HTML

<div class="wrapper">
  <label class="checker">
    <input type="checkbox" name="something" value="true">
    <span class="check"></span>
    <span class="text">未チェック</span>
  </label>
</div>

CSS

/*-------------------------------------------------
チェックボックス
----------------------------------------------- */
/* チェックボックス周辺の見た目調整 */
.checker .check { display: inline-block; vertical-align: middle; }
.checker .text { display: inline-block; vertical-align: middle; max-width 80px; }
.checker input {
  display: none;
}
.checker .check {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 5px;
}
.checker .check::before {
  display: block;
  position: absolute;
  top: 2px;
  left: 0;
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  content: "";
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #fff;
}
.checker input:checked + .check::after {
  display: block;
  position: absolute;
  top: 5px;
  left: 3px;
  width: 16px;
  height: 8px;
  border-left: 3px solid #090;
  border-bottom: 3px solid #090;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  content: "";
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.checker input:disabled + .check:before {
  background-color: #eee;
}
.checker input:checked:disabled + .check::after {
  border-left: 3px solid #aaa;
  border-bottom: 3px solid #aaa;
}

-WEB, CSS

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

ブログ復旧

サブドメインでテスト等をしていたら、ついこのブログのデータベースを上書きしそうになりまして。 デザインとか画像とか全部吹っ飛んでもた(’ワ’) なんとか復旧(?)したので記念に …

no image

Flash代替画像をjavascriptで表示させる方法と、非iOS環境での確認方法

SyntaxHighlighter が適応されないので追加修正しました。 ついでに補足も足しています。 新しい記事はこちら 「自社サイトさぁ、iPadでフラッシュみれないじゃん!」 って言われて、帰り …

クローム最新版ですってお話。ずばっとな!

バーガーキングもじりドメインキングのメンテナンスのせいでロールバックしました@浅色さんです。 「あっ!」って時に、書き直すまでの体力がなくなっちゃいますよね。 よくある例としてphotoshopとかi …

no image

スライドの広告

広告なのか、そのWebサイトだけのリンク表示なのかちょっとわからないのですが、 おもしろい広告手法を見かけました。

no image

メール送信時にエラーが出ることの話。

The original message was received at…. こういうメッセージを何度か目にしたことがあります。メール送信時にエラーとして返ってくる自動返信メール。

名古屋AC

※虐待防止講演会2017 記事一覧

おススメ書籍(AD)

(AD)