CSSの要素でuser-selectというものがあります。
この要素にnoneを指定すると当該コンポーネントは編集ができなくなるというものです。
複数のブラウザに対応させるには恐らく下記のように書くと思いますが、ここで要注意！
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
上記のうち、-webkit-user-selectはChromeとSafariブラウザが対象となりますが、Chromeでは効かず、Safariでは有効になります。
ChromeではＯＫなのに、結果Safariブラウザでアクセスした人は編集が出来ないという自体に陥ります。
全部のブラウザで隅々までテストしろよ と言われればそのとおりなのですが、先入観で見落としガチかと思い投稿させていただきました。
下記のインプットボックスに -webkit-user-select: none を設定しました。Chromeでは編集可能なのに、Safariでは編集できないと思います。
以上、この投稿が誰かのお役に立ちますように。