CSSでinputフォーカス時の影やborderを消す | KonifarPod
CSSでinput要素の影やborderを消したり、新しい装飾をつけたりするやり方がわからずちょっと時間をかけてしまったので備忘として記載しておきます。CSSに慣れてる人だったら簡単なんでしょうけどね。。。 [Original] [Custom] このようにするには、borderやbox-shadowをいくら書いてもダメです！必要なのはoutlineプロパティです！ input[type="text"]:focus { outline: 0; border-color: orange; } outlineとは、アウトラインのスタイル・太さ・色を指定するプロパティです。borderと何が違うの？ってところなんですが、outlineはborderのすぐ外側に描画されるみたいです。で、inputのデフォルトCSSにはoutlineが設定されているため、いくらborderを上書きしようとしても意味
モバイルデバイスにも最適化されたナビゲーション実装「Responsive Multi Menu」 – bl6.jp
Responsive Multi Menuはレスポンシブ対応でモバイルデバイスにも最適化されたナビゲーションを実装することができるjQueryプラグインです。軽量、ユーザーフレンドリーで使い方も簡単なのが特徴的です。HTML5、CSS3、jQueryを使って実装します。 以下はResponsive Multi Menuの詳細になります。 Responsive Multi Menu 上記のページにはモバイル版のデモも用意されています。 MENUをクリックすると多階層になっているメニューが表示されます。複雑なアニメーションなどは全くなく、シンプルに表示・非表示を切り替えたりすることができるので、ユーザーにとっては使いやすいですね。 PC版ではメニュー項目に下の階層を示す矢印がある場合は、マウスオーバーすることでその下の階層にあるメニューが表示されるようになっています。 PC、モバイルともにシン
親要素の影響を受けずに子要素だけを固定してスクロールさせる「scroll-scope.js」 – bl6.jp
scroll-scope.jsは親要素の影響を受けずに子要素だけを固定してスクロールさせることができるjQueryプラグインです。通常、スクロールが設定されている子要素にマウスオーバーしてスクロールし続けると、子要素内のスクロールが終わったあとにそのまま親要素のスクロールに切り替わるのですが、これを防ぐことができるプラグインです。 scroll-scope.jsの使い方やダウンロードは以下になります。実際のデモも用意されているので、是非チェックしてみてください。 scroll-scope.js 例えば、スクロールがある子要素だけをじっくり見たい時なんかに、1番下もしくは1番上までスクロールした時に惰性でそのままページ全体がスクロールされてしまう、なんていうことがあるかと思います。 そんな時、また子要素を画面中央付近など見やすい位置までスクロールで戻したりしなきゃいけないので、割とめんどくさ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
