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

Tweet

238

HTMLとCSSを使って

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

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

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

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

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

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

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

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

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

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

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

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

CSSで

user-select: none;

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

たったのこれだけ！

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

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

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

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

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

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

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

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

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

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

Tweet

短縮URL:

2014年10月27日 WEB制作系 CSSHTMLuser-select