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

https://img3.mukewang.com/65250c6c0001318a06540194.jpg

我有三个选择控件,希望它们像样式一样在字段集内分组,但不使用字段集。就像我的形象一样,


我有以下样式使文本字段看起来像字段集,


border-radius: 6px;

    border: none;

    font-weight: bold;

    background: none;

    box-shadow: none;

    border: 2px solid #e4e4e4;

    width: 100%;

    padding: 25px 5px 5px 10px;

给我这样的风格,

https://img3.mukewang.com/65250c76000131c706480080.jpg

编辑:


超文本标记语言,


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


桃花长相依
浏览 92回答 2
2回答

猛跑小猪

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

森林海

你可以尝试这样的事情:.fieldset {&nbsp; border: 2px groove threedface;&nbsp; border-top: none;&nbsp; padding: 0.5em;&nbsp; margin: 1em 2px;}.fieldset>h1 {&nbsp; font: 1em normal;&nbsp; margin: -1em -0.5em 0;}.fieldset>h1>span {&nbsp; float: left;}.fieldset>h1:before {&nbsp; border-top: 2px groove threedface;&nbsp; content: ' ';&nbsp; float: left;&nbsp; margin: 0.5em 2px 0 -1px;&nbsp; width: 0.75em;}.fieldset>h1:after {&nbsp; border-top: 2px groove threedface;&nbsp; content: ' ';&nbsp; display: block;&nbsp; height: 1.5em;&nbsp; left: 2px;&nbsp; margin: 0 1px 0 0;&nbsp; overflow: hidden;&nbsp; position: relative;&nbsp; top: 0.5em;}<div class="fieldset">&nbsp; <h1><span>Must Add By</span></h1>&nbsp; <select id="cars" name="cars">&nbsp; &nbsp; <option value="volvo">Volvo</option>&nbsp; &nbsp; <option value="saab">Saab</option>&nbsp; &nbsp; <option value="fiat">Fiat</option>&nbsp; &nbsp; <option value="audi">Audi</option>&nbsp; </select>&nbsp; <select id="cars" name="cars">&nbsp; &nbsp; <option value="volvo">Volvo</option>&nbsp; &nbsp; <option value="saab">Saab</option>&nbsp; &nbsp; <option value="fiat">Fiat</option>&nbsp; &nbsp; <option value="audi">Audi</option>&nbsp; </select>&nbsp; <select id="cars" name="cars">&nbsp; &nbsp; <option value="volvo">Volvo</option>&nbsp; &nbsp; <option value="saab">Saab</option>&nbsp; &nbsp; <option value="fiat">Fiat</option>&nbsp; &nbsp; <option value="audi">Audi</option>&nbsp; </select></div>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Html5