私はお問い合わせフォームを作るとき、elementor proのフォームウィジットを使うことが多いのですが、意外とデザインに合わせようと思うとノーコードだけでできないことが多いんですよね…
ということで（割と自分用に）CSSコードコピペ集を作りました！
コピペするだけでelementor proのフォームウィジットを、よくあるデザインに適用できます。
ご活用ください！
必須マークをつける
form field の設定で required mark を表示にすると「*」がつきますが
わかりやすくするために「必須」というマークに変えます。
.elementor-form .elementor-field-required .elementor-mark-required {
display: none;
}
.elementor-form .elementor-field-required .elementor-field-label::after {
content: "必須";
background-color: #DD1717; /* ← 背景色 */
color: #ffffff !important; /* ← 文字色 */
padding: 2px 6px; /* ← 余白 */
font-size: 12px; /* ← 文字大きさ */
margin-left: 10px; /* ← 左側との距離 */
vertical-align: 2px; /* ← 上下微調整 */
}※ちなみにcolor（文字色）は スタイル > Label の Mark Color を継承してしまうので
！importantを入れて上書きしないといけません。またはこの色を活用してもいいですね。
任意マークを追加する
必須がついていない項目に「任意」が表示されるようにします。
.elementor-form .elementor-field-group:not(.elementor-field-required) .elementor-field-label::after {
content: "任意";
background-color: #999; /* 背景色 */
color: #fff !important;
padding: 2px 6px;
font-size: 12px;
margin-left: 10px;
vertical-align: 2px;
}ラベルと入力部分（フィールド）を横に並べる
通常ラベルの下に入力部分がきますが、これを横に並べて、左にラベル・右に入力部分となるようにします。
.elementor-form .elementor-field-group{
flex-wrap:nowrap;
/* align-items: flex-start; 横並びを上揃えにしたい場合 */
}
.elementor-form .elementor-field-label{
width:30%;
}
.elementor-form .elementor-field,
.elementor-form .elementor-field-subgroup{
width:70%;
}
/* 比率はお好みで！ */
/* ↓ スマホ時は縦並びに戻す */
@media screen and (max-width: 767px) {
.elementor-form .elementor-field-group{
flex-wrap:wrap;
}
.elementor-form .elementor-field-label{
width:100%;
}
.elementor-form .elementor-field,
.elementor-form .elementor-field-subgroup{
width:100%;
}
}※比率は文字の長さに応じて、うまく調整してみてください。
※スマホの時は横並びは見づらいので、縦並びに戻すようにしてます。
ラジオボタンのカスタマイズ
ラジオボタンの大きさ・枠線・選択した時の色をカスタマイズできます。
.elementor-form input[type="radio"] {
appearance: none;
position: relative;
display:inline-block;
width: 18px !important; /* ←外側の大きさ */
height: 18px !important; /* ←外側の大きさ */
border: 1px solid #707070; /* ←枠線の色 */
background-color:#ffffff;
border-radius: 50%;
vertical-align: -4px; /* ←上下のズレを調整 */
}
.elementor-form input[type="radio"]:checked:before {
content:'';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 12px; /* ←丸の大きさ */
height: 12px; /* ←丸の大きさ */
border-radius: 50%;
background: #92003B; /* ←丸の色 */
}
ラジオボタンを横並びにする
ちなみにラジオボタンは「inline list」をはいにすると、横並びにできます。
横並びにした時の項目同士の左右間隔はこちらのコードで調整できます。
.elementor-form .elementor-field-subgroup.elementor-subgroup-inline .elementor-field-option {
padding-inline-end: 20px !important;
}チェックボックスのカスタマイズ
チェックボックスの大きさ・枠線・選択した時の色もカスタマイズしてみましょう。
.elementor-form .elementor-field-type-checkbox .elementor-field-option{
display:flex;
align-items:center;
column-gap:6px; /*ボックスとテキストの間隔 */
}
.elementor-form .elementor-field-type-checkbox .elementor-field-option:not(:last-of-type) {
margin-bottom: 10px; /* 各ラジオ項目の感覚*/
}
.elementor-form .elementor-field-type-checkbox input[type="checkbox"]{
appearance:none;
position:relative;
width:20px;
height:20px;
border:1.5px solid #92003B; /* 枠線の太さと色 */
border-radius:3px; /* 枠線の丸み */
background:#fff; /* 背景色 */
cursor:pointer;
}
.elementor-form .elementor-field-type-checkbox input[type="checkbox"]:checked{
background:#92003B; /* チェックしたときの背景色 */
}
.elementor-form .elementor-field-type-checkbox input[type="checkbox"]:checked::after{
content:"";
position:absolute;
top:4px;
left:3px;
width:12px;
height:6px;
border-bottom:2px solid transparent; /* チェックの太さ */
border-left:2px solid transparent; /* チェックの太さ */
transform:rotate(-45deg);
border-color:#fff; /* チェックの色 */
}プレースホルダーの色
デフォルトのプレースホルダーの色は、元の文字色から不透明度を変えています。
この色にしたい！という場合、色指定＋不透明度（opacity）も元に戻してあげる必要があります。
.elementor-form .elementor-field::placeholder {
color: #CECDCD !important; /* 色はお好みで */
opacity:1 !important;
}入力部分（フィールド）の内側の余白
デフォルトだと入力欄の高さ（height）が40pxに固定されているため
余白（padding）だけだと効かないので、高さも自動になるようにしてあげています。
.elementor-form input[type="text"],
.elementor-form input[type="number"],
.elementor-form input[type="email"],
.elementor-form input[type=tel],
.elementor-form input[type=date],
.elementor-form textarea {
height:auto !important;
padding:16px 24px !important;
}各入力項目の間に線を入れる
送信ボタン以外の各入力項目（elementor-field-group）に下線を入れています。
フォームのスタイルタブから設定できる「rows gap」とpadding-bottomの値を同じにしてあげると、線の上下余白が均等になりますよ！
.elementor-form .elementor-field-group:not(.elementor-field-type-submit){
border-bottom:1px solid #bbbbbb;
padding-bottom:20px;
}まとめ
elementorだけでスタイリングできる部分は限られていますが、CSSを追加することで、よくある綺麗めなフォームのデザインにすることができます！
他にもこんなコード欲しい！というリクエストがあれば
この記事にコメントしていただくか、XのDMなどでもいいので直接連絡ください ^^
他にもelementorのフォームを使いこなすティップスを出していこうと思いますので、引き続き見守っててください〜！
本日もお疲れ様でした！
