字段集中的多个选择框样式而不使用字段集

Question

我有三个选择控件，希望它们像样式一样在字段集内分组，但不使用字段集。就像我的形象一样，我有以下样式使文本字段看起来像字段集，border-radius: 6px;    border: none;    font-weight: bold;    background: none;    box-shadow: none;    border: 2px solid #e4e4e4;    width: 100%;    padding: 25px 5px 5px 10px;给我这样的风格，编辑：超文本标记语言，<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>

Answer 1

我已经为你创建了一个jsfiddle：jsfiddle.net/by6rst01/1/

Answer 2

你可以尝试这样的事情：

.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>