Apply CSS to a button

Question

Apply CSS to a button

Navigation

#1 by (3 votes)
#2 by (3 votes)

2

In the company where I work we have an ERP system, and I'm passing some things to the Web, but in the system there is an 'inside' button of an input that is already DataFlex language

HowdoImakeitlooklikethis,ordoesitalludetobeinginsidetheinputsothatusersdonotnoticesomanydifferences?

<div class="col-lg-10"><!-- Inicio Input Descrição -->
    <label for="ex1">Descrição:</label><button type="button" data-toggle="modal" data-target="#meuModal">...</button>
    <input type="text" required class="form-control descricao-input" style="text-transform:uppercase" maxlength="20"  name="descri"><br>
</div>

html css

asked by anonymous 17.10.2017 / 16:28

2 answers

3

Are you using correct bootstrap? You must specify a .input-group .

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="input-group">
      <input type="text" class="form-control" placeholder="input com botão">
      <span class="input-group-btn">
        <button class="btn btn-secondary" type="button">Botão</button>
      </span>
    </div>

Follow related documentation: Documentation

17.10.2017 / 16:36

Group By by Date Help with java arrays

score 3 · Accepted Answer

In this way the button is not within input but gives the sensation to the user.

.grupo {
  margin: 0;
  padding: 0;
}

button, input, label {
  float:left;
  border:0;
}


.input_button {
  margin-left:3px;
  border:1px solid black;
  float:left;
}

<div class="grupo col-lg-10">
  <label for="ex1">
    Código:
  </label>
  <div class="input_button">
    <input type="text" id="ex1"/>
    <button onclick="console.log('clique no botão do input');">
      ...
    </button>
  </div>
</div>