Textareaはそれ自身では機能しません

Question

私はテキストエリアを持っています。私はそれを上にクリックしたときにフォーカスを当てませんが、私が下をクリックするとそれがします。

<textarea type="text" value="" id="theMessage" required></textarea> 

textarea { 
width: 485px; 
height: 310px; 
position: absolute; 
top: 110px; 
border: 0; 
outline: none; 
overflow: hidden; 
resize: none; 
font-family: 'Coming Soon', cursive; 
font-weight: bold; 
} 

Answer 1

textarea { 
 
width: 485px; 
 
height: 310px; 
 
position: absolute; 
 
top: 110px; 
 
border: 0; 
 
outline: none; 
 
overflow: hidden; 
 
resize: none; 
 
font-family: 'Coming Soon', cursive; 
 
font-weight: bold; 
 
border:2px solid black; 
 
}

<textarea type="text" value="" id="theMessage" required></textarea>

<textarea type="text" value="" id="theMessage" required></textarea> 
<style> 
textarea { 
width: 485px; 
height: 310px; 
position: absolute; 
top: 110px; 
border: 0; 
outline: none; 
overflow: hidden; 
resize: none; 
font-family: 'Coming Soon', cursive; 
font-weight: bold; 
border:2px solid black; 
}</style> 

あなたが国境相対または設定した位置を作ることができます上記のことvisible.Inコード・ショーが設定されていることを確認するには、テキストエリアにborder:2px solid black;あなたが設定することができます と背景色を見えるようにします。

background:white; 

Answer 2

いくつかの他のdivはあなたにtextareaのためabsolute位置と重なっていることそれはすることができます。 ポジションが通常のドキュメントフローからテキストを削除するため、div.overlapがテキストエリアの上に配置されていることを示しています。

<textarea type="text" value="" id="theMessage" required></textarea> 

<div class="overlap"></div> 

textarea { 
width: 485px; 
height: 310px; 
position: absolute; 
top: 110px; 
border: 0; 
outline: none; 
overflow: hidden; 
resize: none; 
font-family: 'Coming Soon', cursive; 
font-weight: bold; 
} 

.overlap { 
    height: 200px; 
    background: rgba(255, 0, 0, 0.5); 
    position: relative; 
} 

https://jsfiddle.net/h1aLf94x/4/

だから、テキストエリアの上に重ねることができる任意の要素のためのドキュメントをチェックし、それらを修正。

Answer 3

textarea要素と重複するdiv要素があります。スタイリングから位置属性を削除すると、クリックできるテキストエリアが表示されます。