代码之家 › 专栏 › 技术社区 › claudiadast

单选按钮和复选框未出现

css html

-1

claudiadast · 技术社区 · 7 年前

我正在尝试使用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>

2 回复 | 直到 7 年前

Jun 7 年前

您可以从以下方面简化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的那一部分

londeen 7 年前

下面是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;
}