CSS3のuser-selectをかけるとフォームに入力できなくなった

ドラッグ・アンド・ドロップを実装した際に、テキスト選択されてしまうのを防ぐために、user-selectを全体的に掛けることがあるかと思います。ですが、user-selectを全体的に指定したらいつのまにかテキストフォームが入力できなくなってた。

テキストフォームにuser-selectをかけてしまうと文字が入力できなくなるので気をつけましょう。

回避策としては、テキストフォームにuser-select: auto;をかけると問題ないです。


// html
<div class="drag_area">
    <input type="text" class="text_form">
</div>


// css
.drag_area {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
input.text_form {
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
}