2

サイトのフォームを作成しましたが、選択ドロップダウン ボックスを除いて、すべてのテキスト ボックスの角が丸くなっています。丸みを帯びたボックススタイルを作成しましたが、表示されますが、元の正方形もその背後に表示されます. これを削除する方法はありますか?表示されるのは私だけです。コードを追加します

<td>Service Requested:
      <select style="margin-left: 10px" name="service" tabindex="4">
           <option value=" " selected="selected"> </option>
           <option value="Residential Move">Residential Move*</option>
           <option value="Commercial Move">Commercial Move*</option>
           <option value="Storage Unit Loading">Storage Unit Loading</option>
           <option value="Storage Unit Unloading">Storage Unit Unloading</option>
           <option value="Furniture Consignment">Furniture Consignment</option>
           <option value="Assembly/Removal">Assembly/Removal</option>
           <option value="Landscaping">Landscaping</option>
           <option value="Cleanout">Cleanout</option>
           <option value="General Help">General Help</option>
      </select>
</td>

これはフォーム全体の CSS 全体です。ただそれを持っています

#searchbox {
padding-left: 190px;
padding-bottom:40px;
background: url(../images/border-dashed.gif) repeat-x left bottom;
}

#searchbox form {
margin: 0;
}

#searchbox table {
margin: 0;
}

#searchbox th, td {
text-align: left;
font-weight: normal;
color:#302f2f;
}

#searchbox .submitrow {
text-align: right;
}

#search {

}

#search input[type="text"] {
   border: 2px solid #c1c2c3 ;
   font: bold 12px Arial,Helvetica,Sans-serif;
   color: #302f2f;
   width: 100px;
   padding: 6px 15px 6px 15px;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
   -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
   -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
   -webkit-transition: all 0.7s ease 0s;
   -moz-transition: all 0.7s ease 0s;
   -o-transition: all 0.7s ease 0s;
   transition: all 0.7s ease 0s;
}

#search input[type="text"]:focus {
   width: 150px;
}

#search select {
    border: 2px solid #c1c2c3 ;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #302f2f;
    width: 200px;
    padding: 6px 15px 6px 15px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}

#search select:focus {
    width: 250px;
}

#search textarea {
    border: 2px solid #c1c2c3 ;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #302f2f;
    width: 300px;
    padding: 6px 15px 6px 15px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}

#search textarea:focus {

}


.contactwrapper {width:auto; height:200px; overflow:hidden;}
.extra-wrap {width:800px; overflow:hidden;}




.formbtn {
background: url(../images/formbtns.png) no-repeat;
background-position: 0 bottom;
color: #f1f2ea;
display: block;
line-height: 28px;
float:right;
margin-left:450px;
margin-bottom:40px;
height: 30px;
width: 100px;
margin: 48px 10px;
outline: 0;
text-align: center;
text-decoration: none;
}
.formbtn:hover {
background-position: 0 top;
}

ありがとう

4

3 に答える 3

4

選択ボックスのスタイルを設定する機能は、ブラウザー間で一貫性がありません。CSS スタイルにうまく反応するものもあれば、そうでないものもありますが、CSS スタイルとその動作を完全に一貫して制御したい場合は、JavaScript を利用した偽選択を作成する必要があります。

Select2 コントロールをチェックしてください。

于 2013-02-25T19:54:09.887 に答える
0

別の方法を見つけましたが、すべてのブラウザーでどのように動作するかはわかりません。ただし、境界プロパティを継承するように変更すると、それが行われます。少なくとも Chrome では

ボーダー: 2px 継承 #c1c2c3 ;

于 2013-02-25T20:51:30.287 に答える
0

選択ボックスへのスタイリングは、主にブラウザーによって選択され、背景画像を使用する以外に、javascript なしではあまりカスタマイズできません。

jQuery UI 1.8 以降、選択コントロールを置き換えるコンボボックス機能を持つオートコンプリート コントロールがありました。

于 2013-02-25T20:05:51.937 に答える