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

时间：2017-11-30 07:15:21

标签： css css3

我目前正尝试在输入中删除橙黄色焦点的颜色，并为整个框添加另一种颜色。我试过了：焦点：{ 然后它不起作用。如何在焦点上将此颜色更改为整个文本区域的当前橙黄色到此粉红色。

enter image description here

这个 enter image description here

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我的代码片段是针对html和css

的

3 个答案:

答案 0 :(得分：3)

这对您有用。

请注意，这只是解决方法，据我所知，您无法使用纯CSS执行此操作。

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

使用您自己的小提琴创建的工作示例：

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

希望这对你有所帮助。

答案 1 :(得分：1)

为此使用一点点jQuery。见下文 - 

jQuery(document).ready(function(){
	jQuery('.login-user-input').focusin(function() {
		jQuery(this).parents('.login-input-container').addClass('active');
	});
	jQuery('.login-user-input').focusout(function() {
		jQuery(this).parents('.login-input-container').removeClass('active');
	});
});
.login-input-container {
  margin: 20px;
  border: 1px solid #bfc0c6;
  border-radius: 5px;
  padding: 0;
}
.login-input-container.active{
	    box-shadow: 0 0 2px #ff527b;
    border: 1px solid #fff;
}
.login-user-input {
  display: block;
  color: #282c3f;
  padding-right: 40px;
  font-size: 15px;
  width: 100%;
  border: 0;
  padding: 15px;
      outline: none;
}

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;
}
<!DOCTYPE html>
<html>
<head>
    <title>First Js</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>


<form class="login-login-form" novalidate="">
  <fieldset class="login-input-container">
    <div class="login-input-item">
<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>

</body>
</html>

答案 2 :(得分：0)

您必须重置默认焦点颜色并添加自定义颜色以重置使用outline: none !important; 

input:focus { 
outline: none !important;
border:1px solid red;
}
相关问题
最新问题