Contact Form 7の電話番号のテキストボックスだけが細いとき

Design, Personal, WordPress, 備忘録

メールフォームを作るのにシンプルでとても便利なプラグイン、
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;
}

こんな感じになった。。。

コピペで使えるように備忘録。。。

※写真はビズベクトルさんの無料テーマ(テンプレート)で使用しています。



No Comments

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>