How to outline only the border-radius when input is selected?

Question

.sear {
  height: 50px;
  width: 400px;
  border: 0.5px solid black;
  border-radius: 15px 0px 0px 15px;
}

.sear:focus {
  //how to make only the border radius and other part of box selected?
}

.bar {
  display: inline;
  height: 50px;
  width: 60px;
  border: 0.5px solid black;
  background-color: #ECECEC;
  border-radius: 0px 15px 15px 0px;
}

.bar:hover {
  cursor: pointer;
}

<input type="text" style="display: inline; margin-left: 20%;" class="sear" placeholder="Search...">
<button class="bar">&#128270;</button>

I was just wondering if it is possible to select only the border-radius and the rest of the box when the mouse is focused on the input as opposed to the corner of the box.

Answer 1

If you want to remove the default outline (which is not recommended for accessibility reasons) and add your own you can do this by changing the border color on focus but I would recommend wrapping the elements with a div and using javascript to add and remove a class to make this styling change like this:

var btnGroup = document.querySelector('.btn-group');
var input = document.querySelector('.sear');
input.onfocus = function() {
  btnGroup.classList.add('focus');
}
input.onblur = function() {
  btnGroup.classList.remove('focus');
}

.btn-group {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  border: 1px solid black;
  border-radius: 15px;
  background-color: white;
  width: 400px;
}
.btn-group.focus {
  border-color: rebeccapurple;
}
.sear {
  flex: 1;
  border: none;
  padding: .5rem;
  margin: 0 0 0 0.5rem;
  line-height: 1rem;
  font-size: 1rem;
  outline: none;
}
.bar {
  padding: .5rem 1.5rem;
  width: 60px;
  background-color: #ECECEC;
  border-radius: 0px 15px 15px 0px;
  outline: none;
  border-left: 1px solid #999;
}
.bar:hover {
  cursor: pointer;
}

<div class="btn-group">
  <input type="text" class="sear" placeholder="Search...">
  <button class="bar">&#128270;</button>
</div>