2 Câu hỏi: Cách hiển thị văn bản đầu vào chính xác trong mã này

câu hỏi được tạo ra tại Wed, May 8, 2019 12:00 AM

Tôi đang cố gắng hiển thị, nội tuyến, tùy chọn thứ 3 "Tùy chỉnh" với một số hộp văn bản và hộp nhập để nó đọc.

Tùy chỉnh: Tôi muốn [] x [].

Tuy nhiên, các hộp văn bản không xuất hiện, có lẽ vì tôi có màn hình: ẩn.

Tôi đã thử thêm

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

Tuy nhiên, một hộp văn bản lớn xuất hiện - vì vậy không biết phải làm gì. Có lẽ là một cái gì đó đơn giản, nhưng tôi không thể tìm ra nó.

Mọi trợ giúp đều được đánh giá cao!

#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 Câu trả lời                              2                         

Trong CSS của bạn, bạn hoàn toàn có thể nhắm mục tiêu bất kỳ đầu vào nào trong nhãn:

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

Sử dụng bộ chọn này, sau đó bạn có thể định kiểu đầu vào theo ý muốn. Sử dụng width để kiểm soát mức độ lớn của các đầu vào ...

#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. Cảm ơn bạn rất nhiều!
    2019-05-08 16: 45: 15Z

Bạn có thể thêm một lớp vào các đầu vào radio để cho phép css chỉ chọn cụ thể các thành phần đó:

<input type='radio' class='radio' ... >
#product .sizes input.radio {
    display: none;
}
Ngoài ra, bạn có thể cung cấp id cho các đầu vào bạn muốn hiển thị và ghi đè css sau khi ẩn tất cả các đầu vào:
<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
nguồn đặt đây