Множество стилей блока выбора внутри набора полей без использования набора полей - PullRequest
0 голосов
/ 26 марта 2020

enter image description here

У меня есть три элемента управления select, и я хотел бы, чтобы они группировались внутри fieldset, как стиль, но без использования fieldset. Как и на моем изображении,

У меня есть следующий стиль, чтобы текстовое поле выглядело как fieldset,

border-radius: 6px;
    border: none;
    font-weight: bold;
    background: none;
    box-shadow: none;
    border: 2px solid #e4e4e4;
    width: 100%;
    padding: 25px 5px 5px 10px;

Дает мне стиль как, enter image description here

Редактировать:

HTML,

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

2 голосов
/ 26 марта 2020

Я создал jsfiddle для вас: jsfiddle.net/by6rst01/1/

0 голосов
/ 26 марта 2020

Вы можете попробовать что-то вроде этого:

.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...