Question

我搜索了很多网站，包括这个网站，我无法让它工作。我有一个简单的表单Job Application，您可以在其中看到格式化不起作用的示例。

我想要一个简单的复选框，没什么好看的，用CSS格式化它。我尝试了多个例子，但它永远不会出现。

form {
  background: -webkit-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
  background: -moz-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
  background: linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
  margin: auto;
  position: relative;
  width: 750px;
  height: 1200px;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #000000;
  text-decoration: none;
  border-radius: 10px;
  padding: 10px;
  border: 1px solid #999;
  border: inset 1px solid #333;
  -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}

label {
  text-align: left;
  width: 200px;
  display: flex;
}

input {
  width: 300px;
  float: left;
}

fieldset p {
  clear: both;
  padding: 10px;
}

input[type=radio],
input[type=checkbox] {
  flex: none;
}

textarea#feedback {
  width: 400px;
  height: 150px;
}

<p>
  <label>Position: check all you are interested in </label>
  <input type="checkbox" name="job[]" value="General Pickle Production">General Pickle Production</input>
  <input type="checkbox" name="job[]" value="Fryer">Fryer</input>
  <input type="checkbox" name="job[]" value="Sales">Sales</input>
  <input type="checkbox" name="job[]" value="Manager">Manager</input>
  <input type="checkbox" name="job[]" value="Overnights">Overnights</input>
</p>

有一种简单的方法可以解决这个问题吗？

Answer 1

我不确定简单的外观和感觉是什么意思。但是有一种方法可以将几乎任何类型的样式（包括简单样式）应用于带有类型复选框的输入。

这是一个想法。

为每个输入创建标签标签
使标签标签具有相同的值＆＃34;对于＆＃34; attr和＆＃34; id＆＃34;相应输入标签的attr
使用css隐藏输入
您希望使用的样式标签：在输入标签上检查伪选择器

您输入的内容相同，不用担心，因为单击标签时触发复选框与单击输入本身一样。

为你制作一支小笔，请确保为你自己实现改变的东西这是一个快速绘制，这里是链接 - ＆gt; https://codepen.io/nikolamitic/pen/jYPwqq

<form action="">
  <input type="checkbox" id="some-checkbox">
  <label for="some-checkbox" class="checkbox-label"><i class="check-mark">&#10004;</i></label>
</form>

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]:checked ~ label.checkbox-label .check-mark {
  opacity: 1;
}

label.checkbox-label {
  width: 20px;
  height: 20px;
  display: inline-block;
  border: 2px solid tomato;
  display: flex;
  justify-content: center;
  align-items: center;
}

.check-mark {
  opacity: 0;
  color: tomato;
}

Answer 2

我认为这就是你想要实现的目标。

如果没有，请评论您的需求。

请记住，对于HTML，我们没有</input>标记。但是有XHTML，所以取决于你使用的是什么。

＆＃13;

form {
  background: -webkit-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
  background: -moz-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
  background: linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
  margin: auto;
  position: relative;
  width: 750px;
  height: 1200px;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #000000;
  text-decoration: none;
  border-radius: 10px;
  padding: 10px;
  border: 1px solid #999;
  border: inset 1px solid #333;
  -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}

label {
  text-align: left;
  width: 200px;
  display: inline-block;
}

input[type=checkbox] {
  width: 30px;
  float: left;
}

fieldset p {
  clear: both;
  padding: 10px;
}

input[type=radio],
input[type=checkbox] {
  flex: none;
}

textarea#feedback {
  width: 400px;
  height: 150px;
}

p {display: inline-block}

＆＃13;

<label>Position: check all you are interested in </label>
<div>
  <p>General Pickle Production<input type="checkbox" name="job[]" value="General Pickle Production"></p>
   <p>Fryer<input type="checkbox" name="job[]" value="Fryer"></p>
  <p>Sales<input id="3" type="checkbox" name="job[]" value="Sales"></p>
  <p>Manager<input id="4" type="checkbox" name="job[]" value="Manager"></p>
  <p>Overnights<input id="5" type="checkbox" name="job[]" value="Overnights"></p>
</div>

<input type="text">

＆＃13;

如何使用CSS格式化表单中的复选框？我想要一个简单的外观和感觉

2 个答案: