質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

プラグイン

プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

Q&A

0回答

1817閲覧

Word Press MW WP FORM ラジオボタンの表示が崩れてしまいました

kogari

総合スコア12

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

プラグイン

プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

0グッド

0クリップ

投稿2021/08/25 15:03

編集2022/01/12 10:55

MW WP FORMでラジオボタンの実装をしているときに表示が崩れてしまいました。
完成形は以下の通りです
イメージ説明

現状は以下の通りで、擬似要素で設定している左の丸が多く表示されてしまってます。
イメージ説明

MW WP FORMでは以下のように記述してまして、
元々labelの中にinput要素とspanタグがありましたが試行錯誤してましてspanタグを消してます。

PHP

1 <div class="contact_form_item"> 2 <dt class="contact_form_label"> 3 <label>お問い合わせの種類を選択してください(<span>資料請求の方は資料請求を選択ください</span></label> 4   </dt> 5 <dd class="contact_form_input"> 6 <div class="contact-form-radio"> 7     <label> [mwform_radio name="ラジオボタン" children="商談のご相談,サービスに関する問い合わせ,資料請求,その他"]</label> 8     </div> 9 </dd> 10</div>

HTMLでは以下の記述です。

HTML

1 <div class="contact_form_item"> 2 <dt class="contact_form_label"> 3 <label>お問い合わせの種類を選択してください(<span>資料請求の方は資料請求を選択ください</span>)</label> 4 </dt> 5 <dd class="contact_form_input"> 6 <div class="contact-form-radio"> 7 <label><input type="radio" name="your-radio" id="radio"><span>商談のご相談</span></label> 8 <label><input type="radio" name="your-radio" id="radio"><span>サービスに関するお問い合わせ</span></label> 9 <label><input type="radio" name="your-radio" id="radio"><span>資料請求</span></label> 10 <label><input type="radio" name="your-radio" id="radio"><span>その他</span></label> 11 </div> 12 </dd> 13 </div>

scss

1 .contact-form-radio { 2 label { 3 display: block; 4 @include fz(16,14); 5 &:not(:first-child) { 6 margin-top: 20px; 7 } 8 } 9 margin-top: 21px; 10 [type="radio"] { 11 display: none; 12 } 13 14 span { 15 padding-left: 26px; 16 position: relative; 17 18 &::before { 19 content:''; 20 width: 20px; 21 height:20px; 22 border:1px solid #707070; 23 position:absolute; 24 left:0; 25 top:50%; 26 transform:translateY(-50%); 27 border-radius: 50%; 28 } 29 &::after { 30 content:''; 31 width: 10px; 32 height:10px; 33 background:$main_blue; 34 position:absolute; 35 left:5px; 36 top:50%; 37 transform:translateY(-50%); 38 border-radius: 50%; 39 display: none; 40 } 41 } 42 [type="radio"]:checked + span { 43 &::after { 44 display: block; 45 } 46 } 47 }

検証ツール見てもどこがどの擬似要素なのかが全くわからなくてつまずいてしまったのでご教授いただけると嬉しいです

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

webgoto

2021/08/26 01:25

おそらく、その状態を再現できるcssの記載が無いと回答は難しいのではないでしょうか。
kogari

2021/08/26 11:50

css追加しました。ご指摘ありがとうございます
webgoto

2021/08/26 13:16

記載頂いている状態では再現されないようでしたが、 https://jsfiddle.net/7frhy3sn/ ひとまず、cssの::beforeと::after内のcontent: ""を一つづつ消して、リロードしてどの部分のスタイルが影響しているか確認してみてはいかがでしょうか。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問