我有三個(gè)選擇控件，希望它們像樣式一樣在字段集內(nèi)分組，但不使用字段集。就像我的形象一樣，我有以下樣式使文本字段看起來像字段集，border-radius: 6px; border: none; font-weight: bold; background: none; box-shadow: none; border: 2px solid #e4e4e4; width: 100%; padding: 25px 5px 5px 10px;給我這樣的風(fēng)格，編輯：超文本標(biāo)記語言，<div id="divPrice" class="margin-all"> <div class="editor-field"> <input data-val="true" data-val-number="The field Price must be a number." data-val-required="The Price field is required." id="Price" maxlength="6" name="Price" type="text" value="20.00" class="hasText input-validation-error" aria-required="true" aria-invalid="true" aria-describedby="Price-error"> <label for="Price">Price</label> </div> </div>
2 回答
猛跑小豬
TA貢獻(xiàn)1858條經(jīng)驗(yàn) 獲得超8個(gè)贊
我已經(jīng)為你創(chuàng)建了一個(gè)jsfiddle：jsfiddle.net/by6rst01/1/
森林海
TA貢獻(xiàn)2011條經(jīng)驗(yàn) 獲得超2個(gè)贊
你可以嘗試這樣的事情：
.fieldset {
border: 2px groove threedface;
border-top: none;
padding: 0.5em;
margin: 1em 2px;
}
.fieldset>h1 {
font: 1em normal;
margin: -1em -0.5em 0;
}
.fieldset>h1>span {
float: left;
}
.fieldset>h1:before {
border-top: 2px groove threedface;
content: ' ';
float: left;
margin: 0.5em 2px 0 -1px;
width: 0.75em;
}
.fieldset>h1:after {
border-top: 2px groove threedface;
content: ' ';
display: block;
height: 1.5em;
left: 2px;
margin: 0 1px 0 0;
overflow: hidden;
position: relative;
top: 0.5em;
}
<div class="fieldset">
<h1><span>Must Add By</span></h1>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</div>
- 2 回答
- 0 關(guān)注
- 141 瀏覽
添加回答
舉報(bào)
0/150
提交
取消