由于模板中的CSS

时间:2019-03-17 04:15:02

标签: javascript jquery html css

我的单选按钮似乎由于css文件而被禁用。 CSS由模板提供。我之所以知道该问题是由于css文件引起的,是因为当我注释掉对css文件的引用时,我的按钮可以正常工作。但是我需要css文件来使我的网页看起来更好。 我尝试注释掉单选按钮的CSS样式,但是无济于事。

我已经附上了单选按钮的屏幕快照,有关如何创建它的jquery以及模板提供的css代码。 enter image description here

for( answers in allQuestions[i].answer){ //loops through array and dynamically adds answer values to radio buttons
		var radioBtn = $('<input type="radio" class="radios" name="btnAnswers" value="'+ allQuestions[i].answer[j] + '" /><label for ="secondbtn">' 
		                 + allQuestions[i].answer[j] + '</label><br>');
        radioBtn.appendTo('#radios');
     j++
	}

以下是与无线电输入相关的CSS

input[type="checkbox"] + label,
input[type="radio"] + label {
  text-decoration: none;
  color: #777;
  cursor: pointer;
  display: inline-block;
  font-size: 1em;
  font-weight: 300;
  padding-left: 2.55em;
  padding-right: 0.75em;
  position: relative;
}

input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-transform: none !important;
}

input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
  background: #f8f8f8;
  border-radius: 6px;
  border: solid 1px #e5e5e5;
  content: "";
  display: inline-block;
  height: 1.8em;
  left: 0;
  line-height: 1.725em;
  position: absolute;
  text-align: center;
  top: 0;
  width: 1.8em;
}

input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
  background: #666;
  border-color: #666;
  color: #ffffff;
  content: "\f00c";
}

input[type="checkbox"]:focus + label:before,
input[type="radio"]:focus + label:before {
  border-color: #e89980;
  box-shadow: 0 0 0 1px #e89980;
}

input[type="checkbox"] + label:before {
  border-radius: 6px;
}

input[type="radio"] + label:before {
  border-radius: 100%;
}

感谢您的帮助,谢谢。

1 个答案:

答案 0 :(得分:0)

您没有在输入元素上使用onScroll(),因为id中的for应该在label的帮助下与相应的input元素关联。 / p>