1

フォーム オブジェクトを美しくするクラスを css で作成しました。ドロップダウンとテキスト ボックスの高さが異なる方法でレンダリングされていることがわかります。以下のスクリーンショットと css および jsfiddle を示しています。

ここに画像の説明を入力

CSS

    input,select.effect {
    border:1px solid #ccc;
    height: 20px;
    padding:3px;
    width:97%;
    font-size:14px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    }

HTML

<div class="formcontainer">
<form id="bank_details" name="bank_details" action="">
<fieldset><legend>Primary Bank Details</legend>

<div class="bank_name">
<label>Bank Name:</label>
<br />
<select name="" class="effect">
<option value="">Tamilnad Mercantile Co-Operative Bank</option>
</select>
</div>

<div class="account_no">
<label>Account No:</label>
<br />
<input type="text" name="" class="effect" id="" />
</div>
</fieldset>
</form>
</div>

JSFiddle

4

6 に答える 6

1

box-sizingプロパティを設定することで修正できます。これをルールに追加します

input, select.effect {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

デモフィドル

于 2013-08-06T05:03:39.440 に答える
1

2 つのスタイルを分離します。

input.effect {
 border:1px solid #ccc;
 height: 27px;
 padding:3px;
 width:97%;
 font-size:14px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
}
 select.effect {
 border:1px solid #ccc;
 height: 35px;
 padding:3px;
 width:97%;
 font-size:14px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
}

jsフィドル

于 2013-08-06T04:53:37.620 に答える
0

デフォルトの選択タグをスタイルしません。クロスブラウザではありません。カスタム スタイリングを選択するには、このhttp://vebersol.net/demos/jquery-custom-forms/のような JQ カスタム フォーム プラグインを使用します。

于 2013-08-06T05:30:07.197 に答える
0

ミックスにいくつかのボックスサイズを追加します: http://jsfiddle.net/5BdpQ/4/

input,select.effect {
    border:1px solid #ccc;
    height: 20px;
    padding:3px;
    width:97%;
    font-size:14px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
于 2013-08-06T05:04:08.150 に答える