メールフォームを作るのにシンプルでとても便利なプラグイン、
Contact Form 7を使っていて
なぜか電話番号のテキスト入力項目だけ
細くなっているので修正しました。
子テーマなどのCSSに下記を追加する
/* コンタクトフォーム電話番号のスタイル変更 */
form input[type="tel"] {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #e5e5e5;
border-right-color: #e5e5e5;
border-bottom-color: #e5e5e5;
border-left-color: #e5e5e5;
border-image-source: none;
border-image-slice: 100% 100% 100% 100%;
border-image-width: 1 1 1 1;
border-image-outset: 0 0 0 0;
border-image-repeat: stretch stretch;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
outline-width: 0px;
outline-style: none;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 0px;
font-size: 100%;
background-color: #f9f9f9;
}
電話番号のテキスト入力エリアがちょっと長いので
width: 12em;
などを追加。。。
/* コンタクトフォーム電話番号のスタイル変更 */
form input[type="tel"] {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #e5e5e5;
border-right-color: #e5e5e5;
border-bottom-color: #e5e5e5;
border-left-color: #e5e5e5;
border-image-source: none;
border-image-slice: 100% 100% 100% 100%;
border-image-width: 1 1 1 1;
border-image-outset: 0 0 0 0;
border-image-repeat: stretch stretch;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
outline-width: 0px;
outline-style: none;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 0px;
font-size: 100%;
background-color: #f9f9f9;
width: 12em;
}
コピペで使えるように備忘録。。。
※写真はビズベクトルさんの無料テーマ(テンプレート)で使用しています。