Question

我几周来一直在努力解决这个问题，我不知道如何克服它。

我有一个非常好的CSS样式表用于表单。表单有一个条件是/否单选框，我终于使用javascript工作了但是CSS样式完全消除了。有人可以帮帮我吗。在这一点上我很困惑。

html, body { width: 100%; height: 100%; background: #D2D6DB }

  
form
{
  display: block;
  margin: 30px;
  overflow: hidden;
  background: #FFF;
  border: 1px solid #E4E4E4;
  border-radius: 5px;
  font-size: 0;
}




@media(min-width:800px){
  form > div {
    display: inline-block;
  }
  form > div.col-submit {
    display: block;
  }
}



form > div > label
{
  display: block;
  padding: 10px 20px 10px;
  vertical-align: top;
  font-family: Source Sans Pro, Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: #7f7f7f;
  cursor: pointer;
}

form > div > info
{
  display: block;
  padding: 10px 20px 10px;
  vertical-align: top;
  font-family: Source Sans Pro, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #1d1d1d;
  cursor: pointer;
}


/*form > div > checkLabel
{
  display: block;
  padding-left: 15px;
  /*font-family: Source Sans Pro, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #1d1d1d;
  cursor: pointer;
  text-indent:-15px;
}

form > div > checkLabel> input
{
  width:13px;
  height: 13 px;
  padding:0;
  margin:0;
  vertical align: bottom;
  position:relative;
  top:-1px;
  *overflow:hidden;
}
*/


form > div.col-2, form > div.col-3, form > div.col-4, 
form > div.col-5, form > div.col-6, form >div.col-7,
form > div.col-8,form > div.col-1, form > div.col-11{ 
  border-bottom: 1px solid #E4E4E4;
}

@media(min-width: 800px){
  form > div.col-2, form > div.col-3, form > div.col-4, 
  form > div.col-5,form > div.col-6, form >div.col-7, form > div.col-8,
  form > div.col-1, form > div.col-11
  { box-shadow: 1px 1px #E4E4E4; border: none; }  
}

@media(min-width:800px){
  form > div.col-2 { width: 50% }
  form > div.col-3 { width: 33.3333333333% }
  form > div.col-4 { width: 25% }
  form > div.col-1 {width: 100%}
  form > div.col-5 {width: 20%}
  form > div.col-6 {width: 16.6666666666%}
  form > div.col-7 {width:30%}
  form > div.col-8 {width:10%}
  form > div.col-11 {width:100%}
}

form > div > label > input
{
  display: inline-block;
  position: relative;
  width: 100%;
  height: 27px;
  line-height: 27px;
  margin: 5px -5px 0;
  padding: 7px 5px 3px;
  border: none;
  outline: none;
  border-radius: 3px;
  background: transparent;
  font-size: 14px;
  font-weight: 200;
  opacity: .66;
  transition: opacity .3s, box-shadow .3s;
}

form > div.col-submit {
  text-align: center;
  padding: 20px;
}

form > div.col-1 {
  border: 1px solid #E4E4E4;
  background: #051938 ;
  font-size: 14px;
  padding: 1px;
  display: block;
  width: 100%;
  cursor: pointer;
  border: 0;
  border-radius: 5px;
  text-transform: uppercase;
}

@media(min-width: 800px){
  form > div.col-submit button {
    width: 30%;
    margin: 0 auto;
  }
}


form > div.col-submit button:hover {
  background: #7f7f7f;
}

form > div > label > select
{
  display: block;
  width: 100%;
  margin: 16px 0 8px;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  font-size: 14px;
  font-weight: 200;
  opacity: .33;
}

form > div > label > input:focus, form > div > label > select:focus
{
  opacity: 1;
  box-shadow: 0 3px 4px rgba(0, 0, 0, .15);
}



/*input[type ="date"]{
  display: block;
  width: 100%;
  margin: 16px 0 -3px;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  font-size: 14px;
  font-weight: 200;
  opacity: .33;

  height: 27px;
  line-height: 27px;
}*/

/*input[type ="date"]{
  display: block;
  width: 100%;
  margin: 5px -5px 0;
  padding: 7px 5px 2px;
  background: transparent;
  border: none;
  outline: none;
  font-size: 14px;
  font-weight: 200;
  opacity: .33;
}

input[type "radio"]{
  display: block;
  width: 100%;
  margin: 5px -5px 0;
  padding: 7px 5px 3px;
  background: transparent;
  border: none;
  outline: none;
  font-size: 14px;
  font-weight: 200;
  opacity: .33;
}*/

.sub-questions {
	margin: 0 0 1.5em 1em;
	padding: 0 0 0 1em;
	border-left: 1px solid #cccccc;
}

li 
{
    list-style-type: none;
}

form > div > label > input[type="date"]
{
  display: block;
  width: 100%;
  margin: 13px 0 3px;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  font-size: 14px;
  font-weight: 200;
  opacity: .33;
}

form > div > label > input[type="radio"]
{
  display: block;
  width: 100%;
  margin: 16px 0 8px;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  font-size: 14px;
  font-weight: 200;
  opacity: .33;
}

 fieldset,
 legend {
    border:none;
    margin:0;
    padding:0;
}

/*button {
  background-color: #1d1d1d;
  color: white;
  font-weight: bold;
  box-shadow: none;

  text-transform: uppercase;
}*/

.control:checked ~ .conditional,
			#yes:checked ~ .conditional,
			#required-2:checked ~ .conditional
			#option-2:checked ~ .conditional {
				clip: auto;
				height: auto;
				margin: 0;
				overflow: visible;
				position: static;
				width: auto;
			}

			.control:not(:checked) ~ .conditional,
			#yes:not(:checked) ~ .conditional,
			#required-2:not(:checked) ~ .conditional,
			#option-2:not(:checked) ~ .conditional {
				border: 0;
				clip: rect(0 0 0 0);
				height: 1px;
				margin: -1px;
				overflow: hidden;
				padding: 0;
				position: absolute;
				width: 1px;
			}

<?php
include("home.php");
?>


<!DOCTYPE html>
<html>
  <head>
    <title>Personal Health Questionnaire</title>
    <meta name="description" content="Personal Health Questionnaire">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="/style.css">
  </head>
  
  <body>
    <header>
      <h1>
       <center>Employee Eligibility Statement</center>
      </h1>
    </header>

    <main>
  

        <form action="home.php" method = "POST">
     


  <!--Question 1-->
         <div class="col-1">
                <label>
                 
                </label>
            </div>    
          <div class ="col-11">
            <label><b>1. </b></label>
                 <info>Answer this thing
            <p></p>
           
          <li> <input  type ="radio" name = "yesno" value ="Yes" tabindex = "8" onclick="javascript:yesnoCheck();" id="yesCheck"/> Yes
             <input type ="radio" name = "yesno" value ="No" tabindex = "8" onclick="javascript:yesnoCheck();" id ="noCheck"/> No    
                   <b> &nbsp; &nbsp; &nbsp;   yes or no </b></li>
              <div id="ifYes" style="display:none">
                
<!-- conditional -->
         
          <div class ="col-4"> 
          <label>Person with the condition: <input type ="text" placeholder="First and last name"/></label>
        </div>
        
        <div class ="col-4">
          <label>Exact diagnosis: <input type ="text" placeholder = "Diagnosis"/></label>
        </div>
        
        
         <div class ="col-4"> 
          <label>Date diagnosed: <input type ="date" /></label>
        </div>
        
        <div class ="col-4">
          <label>Date last treated: <input type ="date" /></label>
        </div>
     
        <div class ="col-11">
          <info><b>List all medication(s) prescribed for this condition:</b></info>
        </div>
        
        <div class = "col-4">
          <label><center>Name:</center>
          <input type = "text" placeholder="First medication"/>
          <input type = "text" placeholder="Second medication"/>
          <input type = "text" placeholder="Third medication"/>
           </label>
          </div>
        
        
        <div class = "col-4">
          <label><center>Dosage:</center>
          <input type = "text" placeholder="Dosage for first medication"/>
          <input type = "text" placeholder="Dosage for second medication"/>
          <input type = "text" placeholder="Dosage for third medication"/>
           </label>
          </div>
          
          <div class = "col-4">
          <label><center>Frequency:</center>
          <input type = "text" placeholder="Frequency of first medication"/>
          <input type = "text" placeholder="Frequency of second medication"/>
          <input type = "text" placeholder="Frequency of third medication"/>
           </label>
          </div>
          
          <div class = "col-4">
          <label><center>Currently taking?</center>
            <select name ="CT1" tabindex ="">
              <option value = "Yes">Yes</option>
              <option value = "No">No</option>
            </select>
            
            <select name ="CT2" tabindex ="">
             <option value = "Yes">Yes</option>
              <option value = "No">No</option>
            </select>
            
            <select name ="CT3" tabindex ="">
             <option value = "Yes">Yes</option>
              <option value = "No">No</option>
            </select>
            
           </label>
          </div>
    
    </div>
        </info>  
          </div>
          
  <!-- End CONDITIONAL -->  

   <!-- how i want it to look-->
         
          <div class ="col-4"> 
          <label>Person with the condition: <input type ="text" placeholder="First and last name"/></label>
        </div>
        
        <div class ="col-4">
          <label>Exact diagnosis: <input type ="text" placeholder = "Diagnosis"/></label>
        </div>
        
        
         <div class ="col-4"> 
          <label>Date diagnosed: <input type ="date" /></label>
        </div>
        
        <div class ="col-4">
          <label>Date last treated: <input type ="date" /></label>
        </div>
     
        <div class ="col-11">
          <info><b>List all medication(s) prescribed for this condition:</b></info>
        </div>
        
        <div class = "col-4">
          <label><center>Name:</center>
          <input type = "text" placeholder="First medication"/>
          <input type = "text" placeholder="Second medication"/>
          <input type = "text" placeholder="Third medication"/>
           </label>
          </div>
        
        
        <div class = "col-4">
          <label><center>Dosage:</center>
          <input type = "text" placeholder="Dosage for first medication"/>
          <input type = "text" placeholder="Dosage for second medication"/>
          <input type = "text" placeholder="Dosage for third medication"/>
           </label>
          </div>
          
          <div class = "col-4">
          <label><center>Frequency:</center>
          <input type = "text" placeholder="Frequency of first medication"/>
          <input type = "text" placeholder="Frequency of second medication"/>
          <input type = "text" placeholder="Frequency of third medication"/>
           </label>
          </div>
          
          <div class = "col-4">
          <label><center>Currently taking?</center>
            <select name ="CT1" tabindex ="">
              <option value = "Yes">Yes</option>
              <option value = "No">No</option>
            </select>
            
            <select name ="CT2" tabindex ="">
             <option value = "Yes">Yes</option>
              <option value = "No">No</option>
            </select>
            
            <select name ="CT3" tabindex ="">
             <option value = "Yes">Yes</option>
              <option value = "No">No</option>
            </select>
            
           </label>
          </div>

 <!--  END how i want it to look-->
    <div class = "col-submit">
    <button type= "submit" name = "submit" value = "submit">Submit</button>
    </div>

  </form>
 </main>
 
 <script type="text/javascript">

 function yesnoCheck() {
    if (document.getElementById('yesCheck').checked) {
        document.getElementById('ifYes').style.display = 'block';
    }
    else document.getElementById('ifYes').style.display = 'none';

  cssLink.href="style.css";
  cssLink.rel="stylesheet";
  cssLink.type="text/css";
}
</script>

    <!-- Your web-app is https, so your scripts need to be too -->
    <script src="https://code.jquery.com/jquery-2.2.1.min.js"
            integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00="
            crossorigin="anonymous"></script>
    <script src="/custom.js"></script>
  </body>
</html>

Fiddle

Answer 1

两种表单的CSS选择器都不同。检查每个.x { color:red; #width:50px; #height:50px; display:none; top: 10px; left: 10px; position: absolute; z-index: 1; } .MediaPreview:hover > .x { display:block; } .MediaPreview { position: absolute; width: 128px; height: 72px; background-color: #e0e0e0; cursor: default; }到<form>的路径。这是不同的。

例如，在css选择器工作的表单上

<label>

但是Yes表格的路径是：

form > div > label

需要扩展您的CSS规则以考虑该路径。

Answer 2

在您点击链接之前，您的小提琴会更新两件事：

你的HTML被重复，因此“风格中断”了你使用了很多符号＆gt;在你的CSS我建议不要过度使用，＆gt;意为“直接孩子”的例子：

<form>
   <div> <!-- The symbol > in css will affect this div only-->
       <div> <!-- Here the symbol > is not taking effect as this is not direct children of form-->
   </dv>

最后是fiddle

的链接

希望这有用......

当我通过jQuery / javascript传递条件单选按钮时，为什么我的CSS样式表没有反映出来？

2 个答案: