How to display input text correctly in this code

Question

I am trying to display, inline, the 3rd option "Custom" with some text and input boxes so that it reads.

Custom: I would like [ ] x [ ].

However, the text boxes aren't appearing, presumably because I have a display:hide.

I have tried adding

#product .sizes input:not([type:"text"]) 
{
  display: none;
}

However, a massive text box appears - so at a loss what to do. Probably something simple, but I just can't figure it out.

Any help would be appreciated!

#product .sizes label{
	  position: relative;
	  color: #2fcc71;
	  background-color: #fff;
	  font-size: 1.5rem;
	  text-align: center;
	  height: 80px;
	  line-height: 80px; 
	  display: block;
	  cursor: pointer;
	  border: 3px solid #2fcc71;
	  border-radius: 10px;
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
	}
	
#product .sizes label span{
	display: inline-block !important;
	  color: #2fcc71;
	  background-color: #fff;
	  font-size: 1rem;
	  text-align: left;
	  height: 10px !important;
	  line-height: 10px !important; 	  
	}	
	
#product .sizes input:checked + label{
	  border: 3px solid #333;
	  background-color: #2fcc71;
	  color: #fff;
	}
	
#product .sizes input:checked + label:after {
	  content: "\2713";
	  width: 40px;
	  height: 40px;
	  line-height: 40px;
	  border-radius: 100%;
	  border: 2px solid #333;
	  background-color: #2fcc71;
	  color: #fff;
	  z-index: 999;
	  position: absolute;
	  top: -10px;
	  right: -10px;
	}

#product .sizes input {
	display: none;
}

<form id="product">
    <section class="sizes">
  			<div id="fixedSize"></div>
  			<div id="ChooseSize">
  				<input type='radio' name='radio_size' id='size1' value='1'><label class='size1-label cell' for='size1'>Standard</label>
  				<input type='radio' name='radio_size' id='size2' value='2'><label class='size2-label cell' for='size2'>Different</label>
  				<input type='radio' name='radio_size' id='size3' value='3'><label class='size3-label cell' for='size3'>Custom: I would like <input type="size_h"> x <input name="size_w" type="text"></label>
  			</div>	
		</section>  
</form>

Studocwho · Accepted Answer · 2019-05-08 16:28:01Z

In your CSS, you can quite simply target any inputs inside a label:

#product .sizes label > input {
   display: inline;
}

Using this selector, you can then style the inputs as you want. Using width to control how big the inputs are...

#product .sizes label{
	  position: relative;
	  color: #2fcc71;
	  background-color: #fff;
	  font-size: 1.5rem;
	  text-align: center;
	  height: 80px;
	  line-height: 80px; 
	  display: block;
	  cursor: pointer;
	  border: 3px solid #2fcc71;
	  border-radius: 10px;
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
	}
	
#product .sizes label span{
	display: inline-block !important;
	  color: #2fcc71;
	  background-color: #fff;
	  font-size: 1rem;
	  text-align: left;
	  height: 10px !important;
	  line-height: 10px !important; 	  
	}	
	
#product .sizes input:checked + label{
	  border: 3px solid #333;
	  background-color: #2fcc71;
	  color: #fff;
	}
	
#product .sizes input:checked + label:after {
	  content: "\2713";
	  width: 40px;
	  height: 40px;
	  line-height: 40px;
	  border-radius: 100%;
	  border: 2px solid #333;
	  background-color: #2fcc71;
	  color: #fff;
	  z-index: 999;
	  position: absolute;
	  top: -10px;
	  right: -10px;
	}

#product .sizes input {
	display: none;
}
#product .sizes label > input {
   display: inline;
   width: 30px;
}

<form id="product">
    <section class="sizes">
  			<div id="fixedSize"></div>
  			<div id="ChooseSize">
  				<input type='radio' name='radio_size' id='size1' value='1'><label class='size1-label cell' for='size1'>Standard</label>
  				<input type='radio' name='radio_size' id='size2' value='2'><label class='size2-label cell' for='size2'>Different</label>
  				<input type='radio' name='radio_size' id='size3' value='3'><label class='size3-label cell' for='size3'>Custom: I would like <input type="size_h"> x <input name="size_w" type="text"></label>
  			</div>	
		</section>  
</form>

Romen · Accepted Answer · 2019-05-08 16:29:16Z

You can add a class to the radio inputs to allow css to specifically select those elements only:

<input type='radio' class='radio' ... >

#product .sizes input.radio {
    display: none;
}

Alternatively, you could give ids to the inputs you want to show and override the css after hiding all inputs:

<input type='radio' name='radio_size' id='size3' value='3'><label class='size3-label cell' for='size3'>Custom: I would like <input id="input-h" type="size_h"> x <input id="input-w" name="size_w" type="text"></label>

#input-w, #input-h {
    display: inline;
}

#product .sizes label{
	  position: relative;
	  color: #2fcc71;
	  background-color: #fff;
	  font-size: 1.5rem;
	  text-align: center;
	  height: 80px;
	  line-height: 80px; 
	  display: block;
	  cursor: pointer;
	  border: 3px solid #2fcc71;
	  border-radius: 10px;
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
	}
	
#product .sizes label span{
	display: inline-block !important;
	  color: #2fcc71;
	  background-color: #fff;
	  font-size: 1rem;
	  text-align: left;
	  height: 10px !important;
	  line-height: 10px !important; 	  
	}	
	
#product .sizes input:checked + label{
	  border: 3px solid #333;
	  background-color: #2fcc71;
	  color: #fff;
	}
	
#product .sizes input:checked + label:after {
	  content: "\2713";
	  width: 40px;
	  height: 40px;
	  line-height: 40px;
	  border-radius: 100%;
	  border: 2px solid #333;
	  background-color: #2fcc71;
	  color: #fff;
	  z-index: 999;
	  position: absolute;
	  top: -10px;
	  right: -10px;
	}

#product .sizes input.radio {
    display: none;
}

<form id="product">
    <section class="sizes">
  			<div id="fixedSize"></div>
  			<div id="ChooseSize">
  				<input type='radio' class='radio' name='radio_size' id='size1' value='1'><label class='size1-label cell' for='size1'>Standard</label>
  				<input type='radio' class='radio' name='radio_size' id='size2' value='2'><label class='size2-label cell' for='size2'>Different</label>
  				<input type='radio' class='radio' name='radio_size' id='size3' value='3'><label class='size3-label cell' for='size3'>Custom: I would like <input name="size_h" type="text"> x <input name="size_w" type="text"></label>
  			</div>	
		</section>  
</form>

Collectives™ on Stack Overflow

How to display input text correctly in this code

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related