mercredi 21 septembre 2022

How can I achieve a checkbox, input text field, and extra-span label in the same field row

Hi everyone a newbie here, I'm trying to achieve the following effect but at instep, all I got is the following.

I'm trying to add some options we have a list of options where they can choose from the list they have a checkbox plus a name and input field for quantity text like 1,2,3 and so on, then there is a label for each price for the options they select but, here is where I got stuck! I'm a newbie trying to learn to code I'm using bootstrap and twig, I also try to get the text field active when the checkbox is selected but I couldn't do it.

Any help for a newbie is highly appreciated.

Source Code

.form-group,
.checkbox {
  display: inline-block;
}

.name {
  margin-bottom: 2px;
  background: #66bb6a !important;
  font-size: 1.2rem !important;
  color: #F7F5F5 !important;
  text-align: center;
  font-weight: 400;
  padding: 10px;
  border: 1px solid #ddd !important;
  text-shadow: 1px 0px 3px #6F6F6F;
}

.price {
  background: #66bb6a !important;
  font-weight: 400;
  padding: 10px;
  color: #fff !important;
  border-color: #66bb6a !important;
  transition-property: all;
  transition-duration: 0.3s;
  -webkit-transition-property: all;
  -webkit-transition-duration: 1s;
}
<form role="form">

  <div class="row">
    <div class="form-group">
      <div class="checkbox name">
        <label>
<input type="checkbox" value="closedqueue">Option 1</label>
      </div>
      <input type="text" class="form-control" id="queuename">
      <label for="queuename" class="price">$2.99</label>
    </div>
  </div>

  <div class="row">
    <div class="form-group">
      <div class="checkbox name">
        <label>
<input type="checkbox" value="closedqueue">Option 2</label>
      </div>
      <input type="text" class="form-control" id="queuename">
      <label for="queuename" class="price">$2.99</label>
    </div>
  </div>

  <div class="row">
    <div class="form-group">
      <div class="checkbox name">
        <label>
<input type="checkbox" value="closedqueue">Option 3</label>
      </div>
      <input type="text" class="form-control" id="queuename">
      <label for="queuename" class="price">$2.99</label>
    </div>
  </div>
</form>

Current Output: instep, all I got is the following

Expected Output:
I like to achieve the following




Aucun commentaire:

Enregistrer un commentaire