フォームの textarea フィールドをクロスブラウザのテキスト入力フィールドと同じように表示したいと考えています。また、カスタム スタイルを強制したくはありません。ユーザーのブラウザ内にある標準スタイルをそのまま使用したいと考えています。
だから私は私が使用できることを知っています
textarea {
border-style: inset;
border-width: 2px;
}
Chrom[e,ium] では一致しますが、たとえば Firefox/Iceweasel では一致しません。
textareaそれで、ブラウザに「使用している境界線で要素をレンダリングしてください」と言う簡単な方法はありますinput[type="text"]か？
提起された実際の質問に対する答えは次のとおりです。いいえ、「この要素をこのように見せる」と言う方法はありません。ただし、テキストエリアと入力の両方に同じスタイルを適用することで、一貫性のある外観にすることができます。ただし、一部のブラウザでは、特定のものが特定の方法で表示され、それを回避する方法はありません。
input[type=text], textarea {
border-style: inset;
border-width: 2px;
}
HTML5 では、「テキスト」以外の入力タイプが導入されました。たとえば、「パスワード」、「番号」、および「メール」入力タイプは、「テキスト」入力のように見えますが、特別な動作をします。それらすべてが一貫して見えるようにするには、css で各入力タイプの定義を提供する必要があります。
input[type=text], input[type=password], input[type=email], input[type=number], textarea {
border-style: inset;
border-width: 2px;
}
可能な入力タイプの完全なリストについては、リファレンスを参照してください。
受け入れられた答えは正しいですが、今は少し古くなっています。border-style、border-color、border-width を設定する代わりに、appearanceとプレフィックスを使用して、コントロールのネイティブな外観を維持することができます。
input[type="text"],
textarea {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
これにより、テキスト領域とテキスト フィールドが確実に一致します (*一部のブラウザーで)。テキストエリアの見栄えを良くしたい場合は、textarea代わりに値を使用して同じことを行うことができます。
プレフィックスの使用に関するすべての警告が適用されます。
input[type=text], textarea {
border-style: inset;
border-width: 2px;
}