Question
JIN:RのContact Form 7で送信ボタンの色と幅を変更したい
- ぺ ぺろ
-
WordPress初心者です。
JIN:RでContact Form 7を使い、問合せフォームを作成しています。
画面項目は、標準で作成していますが、
送信ボタンがグレーで幅が狭いので、ボタンの色と幅を変えようと思い
「外観」→「カスタマイズ」→「追加CSS」で以下のコードを追加しましたが変りませんでした。
ボタンの色・サイズの変更を教えて頂けませんでしょうか。
よろしくお願い致します。
.wpcf7 input[type="submit"] {
width:100%;
padding:15px;
border-radius:10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border: none;
box-shadow: 0 3px 0 #ddd;
background: #98dd6c;
transition: 0.3s;
}
.wpcf7-submit:hover {
background: #a4dd6c;
transform: translate3d(0px, 3px, 1px);
-webkit-transform: translate3d(0px, 3px, 1px);
-moz-transform: translate3d(0px, 3px, 1px);
}- WP 6.2
- PHP 8.1
- JIN:R 1.1.1
- さくらのレンタルサーバ
- GoogleChrome
- Windows11
-
こんにちは！
2023/07/10 14:56JIN:R開発チームのRyotaです。
こちらですが、実際のURLを共有いただけますか？
お手数おかけ致しますが、よろしくお願いいたします。
回答遅くなり申し訳ありません。
2023/07/11 09:46https://www.eigyostyle.com/contact/
よろしくお願い致します。
ありがとうございます。
2023/07/13 15:41みた感じ設定するクラスがちょっと違いますね！
.wpcf7-form input[type=submit] {
width: 100%;
padding: 15px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border: none;
box-shadow: 0 3px 0 #ddd;
background: #98dd6c;
color: #fff;
transition: 0.3s;
}
.wpcf7-form input[type=submit]:hover {
background: #a4dd6c;
transform: translate3d(0px, 3px, 1px);
-webkit-transform: translate3d(0px, 3px, 1px);
-moz-transform: translate3d(0px, 3px, 1px);
}
こんな感じで追加CSSヘ追加してみてください。
テキストカラー反映されていなかったのでそれも一緒に追加してます！
またお手隙の際にご確認ください！
お忙しい所、ありがとうございます。
2023/07/13 23:01追加ＣＳＳへ追加したら、上手く、onマウスで緑色に変りました。
ありがとうございました。