2 Вопрос: Как правильно отобразить введенный текст в этом коде

вопрос создан в Wed, May 8, 2019 12:00 AM

Я пытаюсь встроить третий вариант «Пользовательский» с некоторыми текстовыми полями и полями ввода, чтобы он читался.

Пользовательский: я хотел бы [] x [].

Тем не менее, текстовые поля не появляются, вероятно, потому что у меня есть дисплей: скрыть.

Я попытался добавить

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

Тем не менее, появляется массивное текстовое поле - так что растерянно, что делать. Возможно, что-то простое, но я просто не могу понять это.

Любая помощь приветствуется!

р>

#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>    
    
1
2 ответа                              2                         

В вашем CSS вы можете просто настроить таргетинг на любые входы внутри метки:

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

Используя этот селектор, вы можете стилизовать входы по своему усмотрению. Использование width для контроля размера входных данных ...

р>

#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>
    
1
2019-05-08 16: 28: 01Z
  1. Большое спасибо!
    2019-05-08 16: 45: 15Z

Вы можете добавить класс к радиовходам, чтобы позволить css специально выбирать только эти элементы:

<input type='radio' class='radio' ... >
#product .sizes input.radio {
    display: none;
}

Кроме того, вы можете указать идентификаторы для входов, которые вы хотите показать, и переопределить css после скрытия всех входов:

<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>    
    
0
2019-05-08 16: 29: 16Z
источник размещен Вот