聚焦时如何更改边框宽度

Posted 2023-05-07

【中文标题】聚焦时如何更改边框宽度

【英文标题】：How to change border width when focused

【发布时间】：2021-04-03 20:47:07

【问题描述】：

我想在聚焦时更改边框宽度。 我的输入框有 1px 实心边框。 聚焦时，它会改变 2px 不同颜色的实心边框。 但是有 1px 的差异，所以包含这个输入框的 div 在聚焦时会改变它的宽度 1px。 我想解决这个问题。 我是 html 和 css 的初学者，所以我正在寻找你的帮助。 谢谢。

.contact-input 
  border: 1px solid #707070;
  border-radius: 10px;
  margin-top: 1.5rem;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
  padding: 1.5rem;


.contact-label 
  padding-bottom: 2rem;


.contact-input input[type="text"] 
  outline: none;
  border: none;
  border-bottom: 1px solid #707070;
  width: 40%;


.contact-input input[type="text"]:focus 
  outline: none;
  border-bottom: 2px solid #3AD6B1;

<div class="contact-input">
  <div class="contact-label">Name</div>
  <input class="w-50" type="text" placeholder="Your answer">
</div>

【问题讨论】：

添加1px的轮廓？还是盒子阴影？

使用 :hover 方法

分享您的一些代码，以便其他人可以帮助您。

我通过添加代码编辑了我的问题。

【参考方案1】：

添加 1px 的 box-shadow

.contact-input 
    border: 1px solid #707070;
    border-radius: 10px;
    margin-top: 1.5rem;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
    padding: 1.5rem;

.contact-label 
    padding-bottom: 2rem;

.contact-input input[type="text"] 
    outline: none;
    border: none;
    border-bottom: 1px solid #707070;
    width: 40%;

.contact-input input[type="text"]:focus 
    outline: none;
    box-shadow:0 1px 0 #3AD6B1;
    border-color:#3AD6B1;

<div class="contact-input">
    <div class="contact-label">Name</div>
    <input class="w-50" type="text" placeholder="Your answer">
</div>

【讨论】：

您的回答很有用。但我想在焦点时给出动画。你能告诉我一些方法吗？

@George 什么样的动画？

很抱歉给您带来了困扰。我想要你的帮助。我会给你一些网址。 docs.google.com/forms/d/e/…这是我想给的动画。

对不起。我会告诉你。我希望边框在 0.4 秒内从中间点开始填充。

@George 您可能会考虑一个不同的问题来添加有关您想要的动画的更多详细信息。恐怕 cmets 不是处理此问题的最佳方法，我们可能很容易超出您最初问题的范围。

【参考方案2】：

您可以尝试设置联系人输入 div 的高度以适应增加的边框。

.contact-input 
    border: 1px solid #707070;
    border-radius: 10px;
    margin-top: 1.5rem;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
    padding: 1.5rem;
    height: 7.5rem;

【讨论】：

我觉得我很挑剔，但是自动高度呢？

使用自动高度也会出现同样的问题。更好地使用 box-sizing: border-box; developer.mozilla.org/en-US/docs/Web/CSS/box-sizing