remove current color on focus of input and put another color on focus of whole box

Question

I am currently trying to remove the color of orange yellow focus on input and add another color to the whole box. I tried :focus: { } and then but it is not working. how can I change my this color on focus which is currently orange yellow to this pink color to the whole textarea.

this one

.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>

my code snippet is this for html and css

Answer 1

This will work for you.

Please not that this is only a workaround, as far as I know you can't do that with pure CSS.

I've used the position property and added the span element inside both .login-input-item div's because the input element doesn't support the :before or :after selectors.

A working sample created with your own 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>

Hope this is helpful to you.

Answer 2

Use a little bit jQuery for this. See below -

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>

Answer 3

you have to reset default focus color and add custom color for reset use outline: none !important;

input:focus { 
outline: none !important;
border:1px solid red;
}