CSSで作ったボタンなどを押していると、テキスト等が選択状態になってしまうのを防ぐ user-select

user-select-none
このエントリーをはてなブックマークに追加
PR

HTMLとCSSを使って

スライドのボタンや、クリックで動作するボタンを色々作る機会があるのですが

CSSで作ると、手早く簡単に作成できる一方

 

少し、見た目上よろしくないことにもなります

テキスト等は、クリックしていると選択されます

 

ダブルクリックで、テキストの単語を選択

トリプルクリックで、テキストの文章を選択というような動作になっています

 

CSSで作ったボタンに、テキスト部分があると

連続でクリックした時に、上記の テキストに対するクリックの動作が発生して

選択状態になってしまいます

 

これだと、見栄えが悪いので

選択状態にならないようにする

 

 

テキストの選択状態にならないようにする方法

CSSで

user-select: none;

と対象になる要素に加えるだけです

 

たったのこれだけ!

これで、テキストの選択ができなくなりますので

ダブルクリックだろうが、トリプルクリックだろうが 選択できなくなりますので、見た目が保てます

 

対応しているブラウザと対応していないブラウザがあるので

全てが思い通りという訳にはいかないかもしれませんが

多くのブラウザでは、これで対処出来ます

 

 

実際には、ベンダープレフィックスをつけてやらないと動かないことが多いので

-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none

このように書いてやることになります

 

 

ボタンのために使いましたが

このCSSは文章のコピー対策としても、使われてたりするようです

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)