Question

我正在尝试使用Flask启动Web UI，但是单选按钮和复选框未显示。我尝试了以下在线示例，例如此处的示例：https://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp

CSS文件有很多与复选框/收音机有关的部分，但是我不确定是哪一部分是问题的根源（如果有的话）。

这是CSS文件的相关部分：

/* Form */

form {
  margin: 0 0 2em 0;
}

label {
  display: block;
  font-size: 0.9em;
  font-weight: 400;
  margin: 0 0 1em 0;
}

input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none;
  border-radius: 4px;
  border: none;
  border: solid 1px;
  color: inherit;
  display: block;
  outline: 0;
  padding: 0 1em;
  text-decoration: none;
  width: 100%;
}

input[type="text"]:invalid,
input[type="password"]:invalid,
input[type="email"]:invalid,
select:invalid,
textarea:invalid {
  box-shadow: none;
}

.select-wrapper {
  text-decoration: none;
  display: block;
  position: relative;
}

.select-wrapper:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-transform: none !important;
}

.select-wrapper:before {
  content: '\f078';
  display: block;
  height: 2.75em;
  line-height: 2.75em;
  pointer-events: none;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 2.75em;
}

.select-wrapper select::-ms-expand {
  display: none;
}

input[type="text"],
input[type="password"],
input[type="email"],
select {
  height: 2.75em;
}

textarea {
  padding: 0.75em 1em;
}

input[type="checkbox"],
input[type="radio"] {
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none;
  display: block;
  float: left;
  margin-right: -2em;
  opacity: 0;
  width: 1em;
  z-index: -1;
}

input[type="checkbox"]+label,
input[type="radio"]+label {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  font-size: 1em;
  font-weight: 200;
  padding-left: 2.4em;
  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 {
  border-radius: 4px;
  border: solid 1px;
  content: '';
  display: inline-block;
  height: 1.65em;
  left: 0;
  line-height: 1.58125em;
  position: absolute;
  text-align: center;
  top: 0;
  width: 1.65em;
}

input[type="checkbox"]:checked+label:before,
input[type="radio"]:checked+label:before {
  content: '\f00c';
}

input[type="checkbox"]+label:before {
  border-radius: 4px;
}

input[type="radio"]+label:before {
  border-radius: 100%;
}

::-webkit-input-placeholder {
  opacity: 1.0;
}

:-moz-placeholder {
  opacity: 1.0;
}

::-moz-placeholder {
  opacity: 1.0;
}

:-ms-input-placeholder {
  opacity: 1.0;
}

.formerize-placeholder {
  opacity: 1.0;
}

label {
  color: #444444;
}

input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
  background: rgba(144, 144, 144, 0.075);
  border-color: #666666;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
  border-color: #EF6480;
  box-shadow: 0 0 0 1px #EF6480;
}

.select-wrapper:before {
  color: #666666;
}

input[type="checkbox"]+label,
input[type="radio"]+label {
  color: #666666;
}

input[type="checkbox"]+label:before,
input[type="radio"]+label:before {
  background: rgba(144, 144, 144, 0.075);
  border-color: #666666;
}

input[type="checkbox"]:checked+label:before,
input[type="radio"]:checked+label:before {
  background-color: #EF6480;
  border-color: #EF6480;
  color: #ffffff;
}

input[type="checkbox"]:focus+label:before,
input[type="radio"]:focus+label:before {
  border-color: #EF6480;
  box-shadow: 0 0 0 1px #EF6480;
}

::-webkit-input-placeholder {
  color: #999999 !important;
}

:-moz-placeholder {
  color: #999999 !important;
}

::-moz-placeholder {
  color: #999999 !important;
}

:-ms-input-placeholder {
  color: #999999 !important;
}

.formerize-placeholder {
  color: #999999 !important;
}



Here is the relevant portion of the HTML file:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Wrapper -->
<div id="wrapper">

  <!-- Banner -->
  <section id="intro" class="main">
    <span class="icon fa-diamond major"></span>
    <h3>Please upload your authors list below</h3>
    <form action="" method=post enctype=multipart/form-data>
      <p><input type=file name=file>
        <br><br>
        <input type="checkbox" name="sep1" value="Separate initials with period"> Separate initials with period<br>
        <input type="checkbox" name="sep2" value="Separate initials with space"> Separate initials with space<br>
        <input type="radio" name="affiliation" value="Mark affiliations with letter"> Mark affiliations with letter
        <input type="radio" name="affiliation" value="Mark affiliations with number" checked> Mark affiliations with number<br><br>
        <input type=submit value=Upload></p>
    </form>
  </section>
</div>

Answer 1

这是CSS的问题部分：

input[type="checkbox"],
input[type="radio"] {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
display: block;
float: left;
margin-right: -2em;
opacity: 0;
width: 1em;
z-index: -1;
}

将不透明度更改为1
摆脱外观。
您的代码还有其他问题，但这解决了您有关框未显示的问题。
这应该使您更接近所需的内容：

input[type="checkbox"],
input[type="radio"] {
display: inline-block;
opacity: 1;
width: 1em;
z-index: -1;
}

Answer 2

您可以通过以下方式简化CSS：

   input[type="checkbox"], input[type="radio"] {
    -moz-appearance: none;
    -webkit-appearance: none; 
    -ms-appearance: none;
    appearance: none;
    display: block;
     float: left;
     margin-right: -2em; 
    opacity: 0;
    width: 1em;
    z-index: -1;
}

进入此1

input[type="checkbox"], input[type="radio"] {
width: 1em;
z-index: -1;

}

或者您也可以删除CSS的那一部分

Answer 3

它可能由于多种原因而发生

opacity: 1;

如果您的复选框不可见，

是至关重要的事情之一。其次，您的职位不应绝对，应该像

position: relative;

仅在您无法单击/选中复选框的情况下，这是因为您已阻止了指针事件。因此将其更改为

pointer-events: all;

总共，您的 CSS 代码如下所示

input[type="checkbox"]{
        width: 1em;
        position: relative;
        opacity: 1;
        pointer-events: all;
    }

注意：如果仍然无法达到预期效果，请尝试以下代码

input[type="checkbox"]{
            width: 1em;
            position: relative !important;
            opacity: 1 !important;
            pointer-events: all !important;
        }

单选按钮和复选框未出现

3 个答案: