Question

嗨，我是CSS新手，我想知道如何做到这一点，对于CSS我做到了，所以每个输入都会受到影响

    <div class="inputWithIcon">
        <input type="number" placeholder="Uw leeftijd">
        <i class="fa fa-calendar-check-o fa-lg fa-fw" aria-hidden="true"></i>
    </div>

input {
  width: 100%;
  border: 2px solid #999;
  border-radius: 4px;
  margin: 8px 0;
  outline: none;
  padding: 8px;
  box-sizing: border-box;
  transition: 3s;
}

input:focus {
  border-color: #333;
  box-shadow: 0 0 8px 0 #333;
}

.inputWithIcon input {
  padding-left: 40px;
}

.inputWithIcon {
  position: relative;
}

.inputWithIcon i {
  position: absolute;
  left: 0;
  top: 8px;
  padding: 9px 8px;
  color: #aaa;
  transition: 0.3s;
}

.inputWithIcon i {
  background-color: #aaa;
  color: #fff;
  padding: 9px 4px;
  border-radius: 4px 0 0 4px;
}

.inputWithIcon input:focus + i {
  color: #fff;
  background-color: #333;
  transition: 3s;
}

现在我有一个复选框输入，并且我不想被其他东西更改我该怎么办？

Answer 1

您可以在CSS中使用:not()。 See here。或在输入中添加一个类并重写CSS，例如。

<input class="input-style-a">
<input class="input-style-b">


input.input-style-a { /* some styles */}
input.input-style-b { /* some styles */}

Answer 2

您可以使用：not（[type ='checkbox']）

input:not([type='checkbox']) {
  width: 100%;
  ....
}

input:not([type='checkbox']) {
  width: 100%;
  border: 2px solid #999;
  border-radius: 4px;
  margin: 8px 0;
  outline: none;
  padding: 8px;
  box-sizing: border-box;
  transition: 3s;
}

input:not([type='checkbox']):focus {
  border-color: #333;
  box-shadow: 0 0 8px 0 #333;
}

.inputWithIcon input:not([type='checkbox']) {
  padding-left: 40px;
}

.inputWithIcon {
  position: relative;
}

.inputWithIcon i {
  position: absolute;
  left: 0;
  top: 8px;
  padding: 9px 8px;
  color: #aaa;
  transition: 0.3s;
}

.inputWithIcon i {
  background-color: #aaa;
  color: #fff;
  padding: 9px 4px;
  border-radius: 4px 0 0 4px;
}

.inputWithIcon input:not([type='checkbox']):focus + i {
  color: #fff;
  background-color: #333;
  transition: 3s;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="inputWithIcon">
  <input type="number" placeholder="Uw leeftijd">
  <i class="fa fa-calendar-check-o fa-lg fa-fw" aria-hidden="true"></i>
</div>


<div class="inputWithIcon">
  <input type="checkbox" placeholder="Uw leeftijd">
</div>

CSS多个输入

2 个答案: