如何在框内添加下拉字段和可编辑字段？答案

【问题标题】：How to add dropdown field and editable field inside a box?如何在框内添加下拉字段和可编辑字段？
【发布时间】：2022-02-12 19:11:29
【问题描述】：

我想在如图所示的框中添加不同的控件（下拉字段和可编辑文本字段）。我怎样才能做到这一点？

【问题讨论】：

标签： javascript html css bootstrap-4 bootstrap-5

【解决方案1】：

给你。工作 jsFiddle 示例https://jsfiddle.net/utnw34d7/

.wrapper {
  background-color: #eaeaea;
  box-shadow: 1px 2px 3px 0px;
}

.customBox {
  background-color: white;
  box-shadow: -1px 2px 3px -2px;
}


<div class="row m-4">
    <div class="col-12 border p-4 wrapper">
        <div class="row customBox">
            <label class="fw-bold col-form-label col-auto" for="select1">Dropdown 1:</label>
            <div class="col">
                <select id="select1" class="border-0 form-select">
                    <option>Select</option>
                    <option>...</option>
                </select>
            </div>
        </div>
        <div class="row customBox mt-3">
            <label class="fw-bold col-form-label col-auto" for="select2">Dropdown 2:</label>
            <div class="col">
                <select id="select2" class="border-0 form-select">
                    <option>Select</option>
                    <option>...</option>
                </select>
            </div>
        </div>
        <div class="row customBox mt-3">
            <label class="fw-bold col-form-label col-auto" for="text1">Label 1:</label>
            <div class="col">
                <input id="text1" class="border-0 form-control" type="text" value="label1">
            </div>
        </div>
        <div class="row">
            <div class="col-auto ms-auto">
                <a href="#" class="fw-bold text-dark text-decoration-none">+ Add New</a>
            </div>
        </div>
        <div class="row customBox mt-3">
            <label class="fw-bold col-form-label col-auto" for="text2">Label 2:</label>
            <div class="col">
                <input id="text2" class="border-0 form-control" type="text" value="label2">
            </div>
        </div>
        <div class="row">
            <div class="col-auto ms-auto">
                <a href="#" class="fw-bold text-dark text-decoration-none">+ Add New</a>
            </div>
        </div>
    </div>
</div>
<div class="row mt-4">
    <div class="col-auto mx-auto">
        <button class="btn btn-primary me-2">Button 1</button>
        <button class="btn btn-primary ms-2">Button 2</button>
    </div>
</div>

【讨论】：

感谢您的帮助
您也可以删除outline using css so it dont show the border like when selecting。如果这有帮助，请将其标记为答案，以便下一个人来查看解决方案。