How do I modify the font family and border color of my search bar in HTML and CSS?

hello i need to make a serach bar it works for me but i have some modification to do what i aim to do is when i click on the bar search i want to change the color of border from black to blue .. besides how can i change the font family of the word search !

this my html and css code thanks in advice !

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.searchInput::-webkit-input-placeholder {
  font-family: FontAwesome;
  font-weight: normal;
  overflow: visible;
  vertical-align: top;
  display: inline-block !important;
  padding-left: 2%;
  padding-top: 1%;
  color: #9D9494;
}
.searchInput {
  border: 1px solid white;
  border-radius: 5px;
  width: 39%;
  height: 5%;
  padding: 0px;
  font-size: 20px;
  margin-left: 60%;
  margin-top: 2%;
  margin-bottom: 5%;
}

<!-- language: lang-html -->

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
<input class="searchInput" type="text" placeholder="  search " /> <br />

<!-- end snippet -->

You can use the :focus selector to change the border color when you click on the search bar. If you want to change the placeholder font family, you can use the :placeholder selector.

for eg:

 .searchInput:focus {
     border-color: blue;
 }

.searchInput:placeholder{
     font-family: "Open-sans";
 }