私が現在取り組んでいるワードプレスのウェブサイトhttps://atlanticattire.com/contact/には、連絡先フォーム 7 のショートコードを含む連絡先ページが含まれています。メール フィールドにテキスト インデント コードを追加しないと、自動的に事前設定されます。 5px で、-3px 程度にすると、境界線の端に到達する前に実際に消えます。他のフィールドに text-indent を追加しましたが、メール フィールドは他のフィールドと少し似ていないため、その自動インデントを取り除く方法を知りたいです。次に、Safari では、キャレットがプレースホルダー テキストと重なるため、「メッセージ」というテキスト領域が正しく機能しません。私のカスタムCSSは次のとおりです。
/* Contact Form Styling */
.wpcf7
{
border-radius: 4px;
}
/*Webkit Placeholder Text Styles*/
::-webkit-input-placeholder { /* WebKit browsers */
color: #000000 !important;
opacity: 1;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #000000 !important;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #000000 !important;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #000000 !important;
opacity: 1;
}
.wpcf7 input[type=submit]{
border-radius: 0px;
color:#000;
}
.wpcf7 label {
padding: 0 0 0px 0;
font-size: 20px;
color: #000000 !important;
}
.wpcf7 input[type=email]
{
text-indent: 0.0em !important;
}
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7
input[type=url],
.wpcf7 input[type=tel], .wpcf7 input[type=message] {
border-radius: 4px;
background-color: #fff;
color: #000000 !important;
border: 1px solid black !important;
text-indent: 0.6em;
}
.wpcf7 textarea
{
border-radius: 4px;
background-color: #fff;
color: #000000 !important;
border: 1px solid black !important;
text-indent: 0.6em !important;
}
これが意味をなさない場合は申し訳ありませんが、どんな助けでも大歓迎です(: