【HTML5/Javaccript/css】input要素でカーソルを外す方法

input要素にreadonly設定すると、入力不可になります。
ただし、これでは、フォーカル取得可能ですので、カーソルが表示されます。
そこで、これを防止する手段を実装してみました。

以下のサイトのように結構皆さん苦労しているようです。
http://qiita.com/kokoe/items/9ff51d1eb990d8238e83
http://oshiete.goo.ne.jp/qa/257482.html


1、readonly属性の場合 
下の画像のように04の前に入力カーソル（入力位置表示）が表示されます。

ソースコードは以下のようにした場合です。

【HTML5】
<input class="datepic" type="text" id="from_date" readonly>

【CSS】
.datepic {
    border:1px solid white ;     /* 枠線の装飾 */
    border-radius: 3px;         /* CSS3 */
    -moz-border-radius: 3px;    /* Firefox */
    -webkit-border-radius: 3px; /* Safari,Chrome */
    height:20px;

    vertical-align:middle;
    text-align:center;
    cursor:auto;
}

２、disabled属性の場合  

下のコードのように記述することで、入力カーソルが表示されなくなります（下画像）。

ソースコードは以下のようにした場合です。
赤字のように、readonlyをdisabledに変更します。
CSSで背景(background-color)と文字色(color)を設定します。

【HTML5】
 <input class="datepic" type="text" id="from_date" disabled>

 【CSS】
.datepic {
    border:1px solid white ;     /* 枠線の装飾 */
    border-radius: 3px;         /* CSS3 */
    -moz-border-radius: 3px;    /* Firefox */
    -webkit-border-radius: 3px; /* Safari,Chrome */
    height:20px;

    vertical-align:middle;
    text-align:center;

    color:white;
    background-color:black;
    cursor:auto;
}