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

OpenCode 0
Viewed 42

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

checkbox css html
1 Answers

To be honest, several concepts are missing in the question. If that helps, you can easily achieve sort of that display by using a few extra lines of code.

I guess the expected result is for homework, but it makes no sense to hide the checkbox and give no clue if it is missing. Also, there is no relation with a form, which means it is purely aesthetic.

I can see you are repeating id's which is not correct.

Anyway, I hope this help to your goal:

/* Format the style of your whole html document */
html {
  font-size: 23px;
  font-style: italic;
  font-family: 'Arial';
}

.form-group,
.checkbox {
  display: inline-flex; /* you might need to explore css flexbox */
  margin-bottom: 5px;
}

.name {
  margin-bottom: 0; /* remove this */
  background: #66bb6a !important;
  font-size: 1.2rem !important;
  color: #F7F5F5 !important;
  text-align: center;
  font-weight: 400;
  padding: 0; /* remove this */
  border: 0; /* remove this */
  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-group {
 border: 1px solid #66bb6a;
}

/* Modify the inputs */
input {
  border: 0;
}

label {
  padding: 10px;
}

input[type="text"] {
  text-align:center;
  font-size: 23px;
  font-style: italic;
}
<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="queuename1">
      <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="queuename2">
      <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="queuename3">
      <label for="queuename" class="price">$2.99</label>
    </div>
  </div>
</form>

usertLLC0
Related