タグ

CSSと選択に関するiwwのブックマーク (3)

  • 【jQuery】選択した項目によってセレクトボックスの色を変える方法 | KLUTCHE

    フォーム内のプルダウンメニューの選択項目を変更する度に、セレクトボックスの背景色を変える方法です。 デモ サンプル IEでは選択中のセレクトボックスは青背景になるので少しわかり辛いかもしれません。 HTML <select class="clorfulSelect"> <option value="">選択してください</option> <option value="red">赤</option> <option value="blue">青</option> <option value="green">緑</option> <option value="gray">灰</option> <option value="black">黒</option> </select> select 要素に class「clorfulSelect」を設定します。 Javascript jQuery 依存

    iww
    iww 2022/06/17
  • 画面上の文字や画像を選択できないようにする at softelメモ

    問題 文字や画像をダブルクリックされると、選択状態になってしまう。 文字やリンクや画像に、onclickで何らかの処理をするスクリプトを作っているのだが、カチカチクリックされたときやドラッグされたとき選択状態になると、どうにもかっこ悪い。 ダブルクリックしたときやマウスを使って選択しようとしたときに、選択状態にならないようにできる? 答え CSS3では以下のように書ける。 user-select: none; ただ、だいぶ普及した角丸をするborder-radiusのようには広く実装されていないようなので、現状では各ブラウザの独自実装にも合わせておく必要がありそう。 以下のように、各実装にあわせた記述をしておく。 user-select: none; /* CSS3 */ -moz-user-select: none; /* Firefox */ -webkit-user-select:

    画面上の文字や画像を選択できないようにする at softelメモ
    iww
    iww 2016/08/29
    CSSによる選択禁止
  • ドラッグによるテキストの選択をキャンセルする【CSS, HTML, JavaScript】 - Programming Magic

    Webページでは普通、マウスでドラッグするとテキストを選択することができるが、JavaScriptやスタイルシートを使うことで選択を防ぐことができる。 ただし、これはサイトの文章をコピーさせない目的で使うことは推奨しない。 紹介する方法でドラッグによる選択を防いだとしても、Ctrl+Aの全選択を防ぐことができないことが多く、ソースを表示させればコピーできてしまう。 さらに、文章をコピーできないサイトは不便で、ユーザに不快な思いをさせてしまう可能性が高い。 このドラッグによる選択をキャンセルする方法は、JavaScriptなどでドラッグで特殊な効果を表現する際に、通常の選択はしてほしくないという場合などに使うと良い。 例えば、テーブルのセルをドラッグで選択するサンプルのような場合がある。 これでテキストを選択してしまうと、おかしく見えてしまう。 ドラッグによる選択をキャンセルす

  • 1