如何在选择输入时只勾画边框-半径？

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>

我只是想知道，当鼠标集中在输入时，是否可以只选择边框-半径，而不是选择框的角落。

Answer 1

如果你想删除默认的轮廓（由于可访问性的原因，不建议这样做），并添加你自己的轮廓，你可以通过改变焦点上的边框颜色来实现，但我建议用div包装元素，并使用javascript来添加和删除一个类，使这种风格变化像这样。

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>

Answer 2

例如：

.sear:focus {
    /* to change the border when selected. */
    border: 2px solid #0000ff;
}

Answer 3

如果你想拥有轮廓半径，就像评论中提到的那样是不可能的，作为一种变通方法，你可以用这样的方法。

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

.sear:focus {
  outline: none;
  border-color: #9ecaed;
  box-shadow: 0 0 2px #9ecaed;
}

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

Answer 4

我只是想知道你想要什么

可能是这样的？

.sear {
  height: 50px;
  width: 400px;
  border: 1px solid black;
  border-radius: 15px 0px 0px 15px;
  margin-left: 20px;
}

.sear:focus {
  border-top: solid 3px blue;
  border-left: solid 3px blue;
  border-bottom: solid 3px blue;
  margin-top: -2px;
}

.sear:focus + .bar {
  border-top: solid 3px blue;
  border-right: solid 3px blue;
  border-bottom: solid 3px blue;
}

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

.bar:hover {
  cursor: pointer;
}

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