Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

124
Visualizações
How to add dropdown field and editable field inside a box?

I want to add different controls(dropdown field and editable text field)inside a box as shown in image. How can I achieve this? enter image description here

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

Here you go. Working jsFiddle Example 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>
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda