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

【问题标题】：How to outline only the border-radius when input is selected?选择输入时如何仅勾勒边框半径？
【发布时间】：2020-05-12 04:39:20
【问题描述】：

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

我只是想知道当鼠标专注于输入而不是框的角落时，是否可以只选择边框半径和框的其余部分。

【问题讨论】：

你能把相关的 HTML 添加到你的代码中吗，问题也不清楚，你想只有在输入焦点时才有 border-radius 吗？
请添加随附的 HTML 代码，以便我们准确了解您要实现的目标。此外，您对“选择”和“焦点”的使用具有误导性，它是什么类型的输入
@ROOT 和 CypherJac 刚刚编辑。我不希望选择整个输入文本字段，因为我有边框半径。我只希望选择边框半径和输入文本框的其他部分。
@BenjaminSloutsky，你的意思是删除轮廓？
@BenjaminSloutsky，你的意思是有大纲border-radius？如果是这样的话，这是不可能的，outline-radius它只支持firefox，不是标准的。

标签： html css border outline radius

【解决方案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>

【讨论】：

【解决方案2】：

例如：

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

【讨论】：

【解决方案3】：

如果您正在寻找轮廓半径，它不可能像 cmets 中提到的那样，作为一种解决方法，您可以有这样的东西：

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

【讨论】：

【解决方案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>

【讨论】：