css - 删除输入焦点上的当前颜色，并将另一种颜色放在整个框的焦点上

Question

我目前正在尝试删除输入焦点上的橙黄色焦点颜色，并向整个框添加另一种颜色。我尝试过:焦点:{然后它不起作用。我怎样才能将焦点上的颜色(当前为橙黄色)更改为整个文本区域的粉红色。

这个

.login-input-container {
  margin: 20px;
  border: 1px solid #bfc0c6;
  border-radius: 5px;
  padding: 0;
}

.login-user-input {
  display: block;
  color: #282c3f;
  padding-right: 40px;
  font-size: 15px;
  width: 100%;
  border: 0;
  padding: 15px;
}

button,
input,
select {
  overflow: visible;
}

input {
  -webkit-appearance: textfield;
  background-color: white;
  -webkit-rtl-ordering: logical;
  cursor: auto;
  padding: 1px;
  border-width: 2px;
  border-style: inset;
  border-color: initial;
  border-image: initial;
}

fieldset {
  display: block;
  -webkit-margin-start: 2px;
  -webkit-margin-end: 2px;
  -webkit-padding-before: 0.35em;
  -webkit-padding-start: 0.75em;
  -webkit-padding-end: 0.75em;
  -webkit-padding-after: 0.625em;
  min-width: -webkit-min-content;
  border-width: 2px;
  border-style: groove;
  border-color: threedface;
  border-image: initial;
}

.login-login-button-container {
  padding: 10px 20px;
  margin: 0;
  border: 0;
}

.login-login-button {
  background-color: #ff527b;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  padding: 15px;
  display: block;
  width: 100%;
  border: 0;
  text-transform: uppercase;
  border-radius: 3px;
  font-family: Whitney;
}

.login-facebook {
  margin-right: 15px;
  margin-bottom: 0;
  width: 160px;
  height: 50px;
  border: 1px solid #bfc0c6;
  background-color: #fff;
  border-radius: 6px;
}

.login-gplus-logo {
  background-position: -298px 0!important;
  width: 23px;
  top: 13px;
}

.login-user-input-email {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

<form class="login-login-form" novalidate="">
  <fieldset class="login-input-container">
    <div class="login-input-item">

      <!-- begin snippet: js hide: false console: true babel: false -->
      <input type="email" class="login-user-input-email login-user-input" name="email" placeholder="Your Email Address">
    </div>
    <div class="login-input-item">
      <input type="password" class="login-user-input-password login-user-input" name="password" placeholder="Enter Password">
    </div>
    <input type="hidden" name="xsrf" value="p62ZV7Us9ZNGgTzAWkolbiVogIJGNu5r">
  </fieldset>
  <fieldset class="login-login-button-container">
    <button class="login-login-button">Log in</button>
  </fieldset>
</form>

我的代码片段是用于 html 和 css

Answer 1

这对你有用。

请注意，这只是一个解决方法，据我所知，您无法使用纯 CSS 做到这一点。

我使用了 position 属性，并在两个 .login-input-item div 中添加了 span 元素，因为 input 元素不支持 :before 或 :after 选择器。

用您自己的 fiddle 创建的工作示例:

input{
  outline: none;
}

.login-input-container {
  margin: 20px;
  padding: 0;
  position: relative;
  border: none;
}

.login-user-input {
  display: block;
  color: #282c3f;
  padding-right: 40px;
  font-size: 15px;
  width: 100%;
  border: 0;
  padding: 15px;
}

button,
input,
select {
  overflow: visible;
}

input {
  -webkit-appearance: textfield;
  background-color: white;
  -webkit-rtl-ordering: logical;
  cursor: auto;
  padding: 1px;
  border-width: 2px;
  border-style: inset;
  border-color: initial;
  border-image: initial;
}

fieldset {
  display: block;
  -webkit-margin-start: 2px;
  -webkit-margin-end: 2px;
  -webkit-padding-before: 0.35em;
  -webkit-padding-start: 0.75em;
  -webkit-padding-end: 0.75em;
  -webkit-padding-after: 0.625em;
  min-width: -webkit-min-content;
  border-width: 2px;
  border-style: groove;
  border-color: threedface;
  border-image: initial;
}

.login-login-button-container {
  padding: 10px 20px;
  margin: 0;
  border: 0;
}

.login-login-button {
  background-color: #ff527b;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  padding: 15px;
  display: block;
  width: 100%;
  border: 0;
  text-transform: uppercase;
  border-radius: 3px;
  font-family: Whitney;
}

.login-facebook {
  margin-right: 15px;
  margin-bottom: 0;
  width: 160px;
  height: 50px;
  border: 1px solid #bfc0c6;
  background-color: #fff;
  border-radius: 6px;
}

.login-gplus-logo {
  background-position: -298px 0!important;
  width: 23px;
  top: 13px;
}

.login-user-input-email {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

input+span {
  content:'';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border: 1px solid #bfc0c6;
  border-radius: 5px;
  pointer-events:none;
}

input:focus+span {
  border: 1px solid #FF527A;
  z-index: 10;
}

<form class="login-login-form" novalidate="">
  <fieldset class="login-input-container">
    <div class="login-input-item">

      <!-- begin snippet: js hide: false console: true babel: false -->
      <input type="email" class="login-user-input-email login-user-input" name="email" placeholder="Your Email Address">
      <span></span>
    </div>
    <div class="login-input-item">
      <input type="password" class="login-user-input-password login-user-input" name="password" placeholder="Enter Password">
      <span></span>
    </div>
    <input type="hidden" name="xsrf" value="p62ZV7Us9ZNGgTzAWkolbiVogIJGNu5r">
  </fieldset>
  <fieldset class="login-login-button-container">
    <button class="login-login-button">Log in</button>
  </fieldset>
</form>

希望这对您有帮助。