Question

我试图内联显示一些带有文本和输入框的第三个选项“自定义”，以便其读取。

自定义：我想要[] x []。

但是，文本框没有出现，可能是因为我有display：hide。

我尝试添加

#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>

Answer 1

在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>

Answer 2

您可以在无线电输入中添加一个类，以允许CSS仅专门选择那些元素：

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

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

或者，您可以为要显示的输入提供ID，并在隐藏所有输入后覆盖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>

如何用此代码正确显示输入文本

2 个答案: