CSS

css remove border input focus

textarea:focus, input:focus{
    outline: none;
}

css input remove border on focus

input:focus {
  outline: none;
  box-shadow: none!important;
  /*Sometime the blue border you see is from the box-shadow and removing box-shadow will remove the border*/
}

hide input border on focus

input:focus{
    border: none;
}

remove input border on focus

.yourInput:focus {
	outline: none;
}

input:focus show hide div

var input = document.getElementById('myinput');
var message = document.getElementsByClassName('newone')[0];
input.addEventListener('focus', function() {
    message.style.display = 'block';
});
input.addEventListener('focusout', function() {
    message.style.display = 'none';
});

remove input border on focus

.bootstrap-select .form-control:focus {
    outline: 0px none #fff !important;
}

.bootstrap-select .form-control > div.filter-option:focus {
    outline: 0px none #fff !important;
}

.bootstrap-select .form-control > div.filter-option > div.filter-option-inner:focus {
    outline: 0px none #fff !important;
}

.bootstrap-select .form-control > div.filter-option > div.filter-option-inner > div.filter-option-inner-inner:focus {
    outline: 0px none #fff !important;
}

remove focus from input

// Use focus() && blur() to add or remove focus.
import { useRef } from "react"

const inputRef = useRef()

// To remove focus: inputRef.current.blur()
// To focus: inputRef.current.focus()
<input ref='inputRef' {...value} />

input:focus show hide div

.newone { 
  display:none;
}

input:focus show hide div

<div class="container">
  <div class="row">
    <input class="abc" type="text" id='myinput'/>
  </div>
</div>

<div class="container">
  <div class="row">
    <span>some text here </span>
    <span>some text here</span>
  </div>
</div>

<div class="container newone">
  <div class="row">
    <span>some text here</span>
  </div>
</div>
 Run code snippet