入力テキストに点滅するカーソルを隠す方法は？

Question

私は選択入力のように見えるものを作りたいと思っていますが、実際にはそうではありません。

<input type="text">を作成しました。

私はbackground-imageを追加しました。これは「選択矢印」を表示し、選択ボックスであるという印象を与えます。

この入力にデフォルト値を追加しました。

私はそれをクリックするとこの入力の下にSlideDown()となる隠れたdivがあります。

値を変更できないように読み込み専用のものを試しましたが、点滅するカーソルが表示されます。

私はdisabledを使用する場合は、点滅カーソルが表示されませんが、jQueryので.click()または.focus機能が動作しません。ドロップダウンメニューはSlideDown()になりません。

点滅するカーソルを表示しないでクリックするにはどうすればよいですか？

は、ここでは、コード

<div style="padding-top:17px; overflow:hidden;"> 
    <div style="float:left;"> 
     <label for="secretquestion">Secret Question</label><br> 
     <input type="text" class="inputselect" id="secretquestion" name="secretquestion" value="Choose a Secret Question" tabindex=10 /><br> 
     <div class="selectoptions" id="secretquestionoptions"> 
      <b>test</b> 
     </div> 
    </div> 
</div> 

CSS

.selectoptions 
{ 
    display: none; 
    background-color: white; 
    color: rgb(46,97,158); 
    width: 250px; 
    margin:auto; 
    border-style: solid; 
    border-width:1px; 
    border-color: rgb(46,97,158); 
    font-size: 14px; 
    text-align: center; 
} 

.inputselect { 
    color: white; 
    cursor: pointer; 
    background-image: url('inputselect.png'); 
    padding-top: 5px; 
    padding-bottom: 5px; 
    padding-left:10px; 
    padding-right:-10px; 
    width:240px; 
    border-style: solid; 
    border-color: rgb(46,97,158); 
    border-width: 1px; 
} 
.inputselect:hover { 
    outline:none;  
    color:aqua; 
    cursor: pointer; 
    background-image: url('inputselecthover.png'); 
} 
.inputselect:focus { 
    outline:none;  
    color:aqua; 
    cursor: pointer; 
    background-image: url('inputselecthover.png'); 
} 

Answer 1

カーソルの色は、テキストの色と一致します。

<input type="text" style="color: transparent"> 

実際に入力ボックスにテキストを表示したい場合（私の場合は、一部の人が必要）、テキストシャドーを使用できます。

<style> 
    body, div, input { 
     color: #afa; 
     text-shadow: 0px 0px 1px #fff; 
    } 
<style> 

（FirefoxとSafariでテスト済み）

Answer 2

私はぼかしを使用してカーソルを取り除いたばかりです。

$('input').mousedown(function(e){ 
    e.preventDefault(); 
    $(this).blur(); 
    return false; 
}); 

Answer 3

type = "submit"も追加する必要があります。

Answer 4

私は、これは完璧なソリューションであると思う：広い十分な入力を行い、右画面の権利を合わせ、したがって、まだクリッカブル

Answer 5

だながらカーソルおよびコンテンツは、画面の外で見つけ作りますついに私はトリックの解決策を見つけました。

<div class="wrapper"> 
    <input type="text" /> 
</div> 

.wrappr { 
    width: 100px; 
    height: 30px; 
    overflow: hidden; 
} 
.wrapper input { 
    width: 120px; 
    height: 30px; 
    margin-left: -20px; 
    text-align: left; 
} 

と私の引用で、それは動作します！

Answer 6

これは（ない完全な応答が）役立つかもしれない - 私は最近のプロジェクトでの入力を無効にするためにそれを使用：

document.getElementById('Object').readOnly = true; 
    document.getElementById('Object').style.backgroundColor = '#e6e6e6'; 
    document.getElementById('Object').onfocus = function(){ 
     document.getElementById('Object').blur(); 
    }; 

ユーザが入力に焦点を当てたときに、その中にクリック、ぼかし（）関数はフォーカスを削除します。この間、readOnlyを "True"に設定し、背景色をグレーに設定すると（＃e6e6e6）、ユーザは混乱しないようにしてください。