2017-06-22 7 views
1

私は同じコードを入力と選択に使用しているインデックスページにフォームを持っていますが、問題はその入力タグでは動作していますが、選択タグでは最初にwidthとなっていますちょっと小さいと私はオプションを選択しているときに選択されていないMACクロムでは動作しますが、ウィンドウズクロムでは選択されていない!選択オプションタグのCSSコード

私のコードをチェックして、どこが間違っているか教えてください!

#contact-form input[type="text"], 
 
#contact-form select[type="text"], 
 
#contact-form textarea { 
 
    width: 247px; 
 
    max-width: 100%; 
 
    padding: 16px 10px; 
 
    background: #4f5662; 
 
    border: 1px solid #828fac; 
 
    border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    box-sizing: content-box; 
 
    -moz-border-radius: 5px; 
 
    -o-border-radius: 5px; 
 
    color: #b6b7b8; 
 
    font-size: 14px; 
 
    font-family: helvetica; 
 
    box-shadow: none; 
 
    -webkit-box-shadow: none; 
 
    -moz-box-shadow: none; 
 
    -o-box-shadow: none; 
 
    margin-right: 18px; 
 
} 
 

 
#contact-form input[type="submit"], 
 
.newsleter-widget input[type="submit"] { 
 
    float: right; 
 
    font-size: 14px; 
 
    color: #fff; 
 
    font-family: 'Noto Sans', sans-serif; 
 
    text-transform: uppercase; 
 
    background: #8248ac; 
 
    padding: 20px 13px; 
 
    border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    -o-border-radius: 5px; 
 
    border: none; 
 
} 
 

 
#contact-form input[type="text"], 
 
#contact-form select[type="text"], 
 
#contact-form2 textarea { 
 
    margin-right: 0; 
 
    display: block; 
 
    width: 94%; 
 
    max-width: 94%; 
 
    margin-bottom: 19px; 
 
    padding: 16px 3% 
 
} 
 

 
#contact-form textarea, 
 
#contact-form2 textarea { 
 
    height: 110px; 
 
    padding: 8px 3%; 
 
} 
 

 
#contact-form input[type="submit"], 
 
#contact-form2 input[type="submit"] { 
 
    display: block; 
 
    float: right; 
 
    padding: 20px 38px; 
 
}
<div class="span4"> 
 
    <h3>Contact Form</h3> 
 
    <form id="contact-form"> 
 
    <input type="text" name="name" class="name" placeholder="Name"> 
 
    <input type="text" name="email" class="email" placeholder="Email address"> 
 
    <input type="text" name="email" class="email" placeholder="Phone no"> 
 
    <select type="text" name="service"> 
 
\t \t \t \t <option value="" selected >Select Services</option> 
 
\t \t \t \t <option value="" >Option 1</option> 
 
\t \t \t \t <option value="" >Option 2</option> 
 
\t \t \t \t <option value="" >Option 3</option> 
 
\t \t </select> 
 
    <input type="submit" name="submit-form" id="submit" value="Send Message"> 
 
    </form> 
 
</div>

私もここにコードを貼り付ける場合は、オプションタグはしかし選ばなっているが、私のコードでは、その選択されたばかりではありません!それでもここでも選択タグの幅は入力タグと比較してまだ小さい。

今、このUpdated Code Image

+0

使用 'ボックスサイズ変更のためのフィドルです: –

+0

は、はい、それは私が、その増加選択フィールドの大きさ(高さ)のために働いたあなたの選択フィールドのコンテンツ-box' ....そして、今選択されている... –

+0

私はそれがあなたが欲しいものだと思います。あなたが言ったように、幅が少し小さくなった –

答えて

1

のようなそのルックスはあなたの問題box-sizing: border-boxとタスクを行いますwidthmarginプロパティにいくつかの変更のためのプロパティ(幅と高さ) サイジングに含まれるべきものにbox-sizingプロパティを使用する必要があります。ここで

は同じ https://jsfiddle.net/c7Lojau2/

関連する問題