wordpressのコンタクトフォーム7でフォームを作っていると、電話番号や数値の入力欄がテキストフォームと比べて細くて真四角だったので、テキストフォームとそろえてみた。
電話番号とFAXの欄が細くて四角い。
これを子テーマのスタイルシートに
[css autolinks="false" classname="myclass" collapse="false" firstline="1" gutter="true" highlight="1-3,6,9" htmlscript="false" light="false" padlinenumbers="false" smarttabs="true" tabsize="4" toolbar="true" title="example-filename.php"]
/* 電話番号入力欄 */
form input[type="tel"] {
border-width: 1px;
border-style: solid;
border-radius: 4px;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 0px;
font-size: 100%;
background-color: #ffffff;
width: 12em;
}
[/css]
を書いてみた。
border-radius で、角を丸く。
background-color: #ffffff;で枠内の背景を白にした。
そしてwidth: 12em; で入力欄の幅を指定。この幅でスマホの幅になっても見切れることは無い。
完成。
実際に使用したサイトはこちら
https://denpakudo.jp/guideapplicationform/
ドロップダウンのフォームの編集はこちら
コンタクトフォーム7のドロップダウンのCSS
090-3990-0645