スタイルは変更されません

Question

私は連絡先フォーム7をブリッジテーマで使用しています。

フォームをカスタマイズして、2つの列を持ち、テキストがユーザーがコードを書き込むボックスと同じ行にあるようにしようとしました。

私が問題にしているのは、高さと幅を変更して境界を設定するスタイルを使用しても、スタイルをとらないということです。なぜこれが起こることができるか考えてみませんか？

#left_form7 { 
 
    width: 47%; 
 
    float: left; 
 
    margin-right:6%; 
 
} 
 

 
#right_form7 { 
 
    width: 47%; 
 
    float: left; 
 
} 
 

 
.clearfix_form7:after { 
 
    content:"\0020"; 
 
    display:block; 
 
    height:0; 
 
    clear:both; 
 
    visibility:hidden; 
 
    overflow:hidden; 
 
    margin-bottom:10px; 
 
} 
 

 
.clearfix_form7 { 
 
    display:block; 
 
} 
 

 
span.label_form7 { 
 
    float: left; 
 
    width: 180px; 
 
} 
 

 
span.form-input_form7 { 
 
    float: left; 
 
    width: 200px; 
 
}

<div class="clearfix_form7"> 
 
    <div id="left_form7"> 
 
    <span class="label_form7">First name</span><span class="form-input_form7" style="border-width:2px; border-style: solid; border-color: #000000; height: 5px; width:320px">[text first-name]</span><br/> <br/> 
 
    <span class="label_form7">Last name</span><span class="form-input_form7" style= "border-width:2px; border-style: solid; border-color: #000000; height: 5px; width:320px">[text last-name]</span><br/> <br/> 
 
    <span class="label_form7">How Did You Find Us?</span><span class="form-input_form7" style="border-width:2px; border-style: solid; border-color: #000000; height: 5px; width:320px">[text text-find-us]</span><br/> 
 
    </div> 
 
    <div id="right"> 
 
    <span class="label_form7">Email</span><span class="form-input_form7" style="border-width:2px; border-style: solid; border-color: #000000; height: 5px; width:320px">[email* your-email]</span><br/> <br/> 
 
    <span class="label_form7">Phone</span><span class="form-input_form7" style="border-width:2px; border-style: solid; border-color: #000000; height: 5px; width:320px">[text your-phone]</span> 
 
    </div> 
 
</div></div> 
 

 
Subject [text* your-subject] <br/> 
 
Message [textarea* your-message]<br/> 
 
[submit "Send"]

Here出力の例それが今、私は箱が変更されていないようだ理解できるようであるとして。

Answer 1

これを試してください。入力エレメントごとに同じスタイルを繰り返す必要はありません。それらを選択するにはクラスform-input_form7があり、height: 5pxをインラインスタイルにすると、それを外部CSSで上書きすることはできません。

#left_form7 { 
 
    width: 47%; 
 
    float: left; 
 
    margin-right:6%; 
 
} 
 

 
#right_form7 { 
 
    width: 47%; 
 
    float: left; 
 
} 
 

 
.clearfix_form7:after { 
 
    content:"\0020"; 
 
    display:block; 
 
    height:0; 
 
    clear:both; 
 
    visibility:hidden; 
 
    overflow:hidden; 
 
    margin-bottom:10px; 
 
} 
 

 
.clearfix_form7 { 
 
    display:block; 
 
} 
 

 
span.label_form7{ 
 
    float: left; 
 
    width: 180px; 
 
} 
 

 
span.form-input_form7{ 
 
    float: left; 
 
    width: 200px; 
 
    border-width:2px; 
 
    border-style: solid; 
 
    border-color: #000000; 
 
}

<div class="clearfix_form7"> 
 
    <div id="left_form7"> 
 
    <span class="label_form7">First name</span><span class="form-input_form7">[text first-name]</span><br/> <br/> 
 
    <span class="label_form7">Last name</span><span class="form-input_form7">[text last-name]</span><br/> <br/> 
 
    <span class="label_form7">How Did You Find Us?</span><span class="form-input_form7">[text text-find-us]</span><br/> 
 
    </div> 
 
    <div id="right_form7"> 
 
    <span class="label_form7">Email</span><span class="form-input_form7">[email* your-email]</span><br/> <br/> 
 
    <span class="label_form7">Phone</span><span class="form-input_form7">[text your-phone]</span> 
 
    </div> 
 
</div> 
 

 
Subject [text* your-subject] <br/> 
 
Message [textarea* your-message]<br/> 
 
[submit "Send"]