Question

我有CSS：

form{}

form input,
form select,
form textarea {
  border-radius: 0.4em;
  -webkit-appearance: none;
  border: solid 1px #ddd;
  padding: 0.5em;
  width: 100%;
}

form input:focus,
form textarea:focus {
  box-shadow: 0px 0px 2px 2px #c94663;
}

form ::-webkit-input-placeholder {
  color: #aaa;
}

form :-moz-placeholder {
  color: #aaa;
}

form ::-moz-placeholder {
  color: #aaa;
}

form :-ms-input-placeholder {
  color: #aaa;
}

当我创建表单时，所有表单元素（例如输入类型=文本，提交...）都是正确创建的，但当我说input type="radio"它没有显示单选按钮并给我输出如SEE HERE，如果我删除行：

-webkit-appearance: none;

它显示单选按钮，但它会影响我的所有表单元素，所以我无法弄清楚如何看到单选按钮。

Answer 1

正因为如此，您正在将样式应用于所有输入标签。

form input, form select, form textarea {
       border-radius: 0.4em; 
      -webkit-appearance: none;
       border: solid 1px #ddd;
      padding: 0.5em;
      width: 100%;
    }

而是使用form input[type=text]，它只会定位文本框

form input[type=text],form input[type=submit],form input[type=reset], form select, form textarea {
           border-radius: 0.4em; 
          -webkit-appearance: none;
           border: solid 1px #ddd;
          padding: 0.5em;
          width: 100%;
        }

Answer 2

您可以使用<input> type Attribute方法选择更具体的内容。请参阅 DEMO 。

form input[type="radio"]{ width:auto;}

css导致单选按钮不显示

2 个答案: