xxxxxxxxxx
const inputElement = document.getElementById("myInput");
inputElement.blur(); // Removes focus from the input element
xxxxxxxxxx
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*/
}
xxxxxxxxxx
<input type="text" id="myInput" value="This is a focused input">
<button onclick="removeFocus()">Remove Focus</button>
<script>
function removeFocus() {
document.getElementById("myInput").blur();
}
</script>
xxxxxxxxxx
<style>
input:focus {
outline: none;
/* or border: none; if you want to remove the border completely */
}
</style>
<!-- Example input element -->
<input type="text" placeholder="Enter text">
xxxxxxxxxx
.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;
}
xxxxxxxxxx
onPageChange(event){
// Your rest of the code here..
// finally call blur() like:
event.target.blur();
}
xxxxxxxxxx
// 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} />