选择输入时如何仅勾勒出边框半径？

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>

我只是想知道当鼠标聚焦在输入而不是框的角上时是否可以 select 仅边框半径和框的其余部分。

Answer 1

例如：

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

Answer 2

如果您希望具有轮廓半径，它不像评论中提到的那样可行，作为解决方法，您可以使用类似这样的东西：

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

如果您想删除默认轮廓（出于可访问性原因不推荐这样做）并添加您自己的轮廓，您可以通过更改焦点上的边框颜色来实现，但我建议用 div 并使用 javascript 添加和删除 class 以使此样式更改如下：

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

选择输入时如何仅勾勒出边框半径？

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

html

css

border

radius

outline