CSSの疑似クラス「:focus-within」が素晴らしい理由
CSSの疑似クラス「:focus-within」を使用して、フォームの入力時にハイライト表示させるテクニックを紹介します。 :focus-withinは適用した要素の子孫要素にフォーカスに当たった時に起動するセレクタで、効果的に使用すると非常に便利です。 Why CSS :focus-within is amazing by Chris Bongers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLの構造 CSSの疑似クラス「:focus-within」 :focus-withinの効果をより素晴らしいものにする :focus-withinのサポートブラウザ はじめに ここでお話するのは、フォーカスされた要素にスタイルする:focusセレクタのことではありません。:focus-withinは、その中の子孫要素
disabledなボタンのhoverのスタイルを無効にする方法
「type="submit"」や「type="button"」のinput要素、またはbutton要素などのボタンをdisabledに変更したときに、hoverのスタイルを無効にする方法を紹介します。 １．はじめに 次のようなinput要素のボタンがあります。 HTML <input name="send" type="submit" value="送信" /> これをdisabledに変更するとボタンが押せなくなるような表示に切り替わります。またクリックしても無反応です。 HTML <input name="send" type="submit" value="送信" disabled="disabled" /> が、ボタンに下記のようなスタイルを設定しているとします。 input { background-color: #0076bf; background-image: linear
checkBo jQuery Plugin
checkBo jQuery Plugin, Custom Checkbox and Radio button that really work by @ElmahdiMahmoudCross browsers: Chrome, Firefox, Safari, Opera ( PC, MACOS ). IE8+ (CSS3 not supported) Handheld/Touch devices support: Andriod, IOS, BlackBerry Lightweight Plugin Check all checkboxes Size options: Default, Small, Medium, Large NO classes or custom attributes are required for states :checked. More options a
Placeholdem // Placeholder Caret Animation
<!-- add placeholder to input or textarea --/> <input name="fieldname" placeholder="Placeholder Value" /> // run Placeholdem on all elements with placeholders Placeholdem( document.querySelectorAll( '[placeholder]' ) ); 2016-11-04 Update This project is no longer being developed or maintained. The effect this plugin gives is visually appealing, but it's a bad practice in terms of usability and acc
[CSS]フォームにちょっとだけアニメーションを加えて楽しくするスタイルシート -Animated Toggles
フォームのチェックボックスとラジオボタンに余分はタグは使用せずに、ちょっとだけアニメーションを加えて楽しくするスタイルシートを紹介します。 Animated Toggles HTML チェックボックスもラジオボタンも通常通りにマークアップします。 余分なタグは特にありません。 <form> <h1>Animated Toggles!</h1> <div class="controls"> <input id='check-1' type="checkbox" name='check-1' checked='checked' /> <label for="check-1">Apples</label> <input id='check-2' type="checkbox" name='check-1' /> <label for="check-2">Oranges</label> </div
[JS]スマフォに最適！フォームのラベルをアニメーションでぽんっと表示するスクリプト -Label Better
フォームにフォーカスすると、プレースホルダーに配置したラベルがアニメーションでぽんっと上に移動するjQueryのプラグインを紹介します。 デスクトップ用のページで使用してもかっこいいですが、スマフォ用のページにも省スペースを兼ねて使用してもいいですね。 デモページ name, mailの他にもpasswordなどのフォームも用意されています。4番目のデモでは、プレスホルダーのテキストとは異なるテキストを表示します。 また、デモにはありませんが、ラベルは上・下・左・右に移動させることもできます。 Label Betterの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://usingcss3.com/awesome-input-focus-effects/
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP