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*/
}

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

.yourInput:focus {	outline: none;
}

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

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

// 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} />

const inputElement = document.getElementById("myInput");
inputElement.blur(); // Removes focus from the input element