当前位置：文江博客话题详情

我如何更改单击CSS时出现的文本输入下划线

发布于 2025-02-11 18:23:08 字数 204 浏览 0 评论 0原文

每当我单击形式的文本输入时，就会出现一个绿色下划线，它并不是我当前正在处理的网站的原色。我该如何将其从绿色中更改为紫色？（＆gt;图像以供参考 https://i.sstatic.net/vebk7.jpg

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

×眷恋的温暖 2025-02-18 18:23:08

这是主要想法，据我所知，我们有3个输入状态，
活动，focus，hover hover。
当您选择它在活动模式下时，在通过按tabs键选择它时，它处于焦点模式，当您MOUSESOVE时，它处于悬停模式。
因此，要在这三个模式下修改T的样式，我在示例中显示了输入：focus，输入：hover and input：active selectors and oflectors和比应用CSS。您可以使用它并在问题中应用相同的方案。

我还添加了所有三种模式，以更好地理解。

  .main {
  显示：Flex;
  准项目：中心；
  Jusify-content：Cenetr；
  挠性方向：列；
  身高：100VH；
}

.AllState＆gt;输入，
跨度输入{
  边界：无；
  边界底：1PX固体＃C5C5C5;
}

.AllState＆gt;输入：悬停，
.AllState＆gt;输入：焦点，
.AllState＆gt;输入：Active {
  大纲：无；
  边界底：1px固体紫色；
}

.modes {
  显示：Flex;
  挠性方向：列；
  差距：15px;
}

.modes跨度输入{
  显示：块;
  宽度：100％；
}

。主动输入：活动，
。输入：悬停，
.COCUS输入：focus {
  大纲：无；
  边界底：1px固体紫色；
}

 ＆lt; div class =“ main”＆gt;
  ＆lt; span class =“ allstate”＆gt; ast; lt; input type =“ text” value =“”占位符=“输入一些数据” /＆gt;＆lt; /span＆gt;
  ＆lt; div class =“模式”＆gt;
    ＆lt; span class =“ active”＆gt;仅活动状态：＆lt; input type =“ text” value =“”占位符=“输入一些数据” /＆gt;＆lt; /span＆gt;
    ＆lt; span class =“悬停”＆gt;仅悬停（鼠标在）状态：＆lt; input type =“ text” valie =“”占位符=“输入某些数据” /＆gt;＆lt;＆lt; /span＆gt;
    ＆lt; span class =“ focus”＆gt;仅焦点状态：＆lt; input type =“ text” value =“”占位符=“输入某些数据” /＆gt;（概述不会显示为焦点，而仅出现）跨度＆gt;
  ＆lt;/div＆gt;
＆lt;/div＆gt;

Here is the main idea, according to my knowledge we have 3 states for input,
active,focus,hover.
when you are selecting it's on the active mode, while you are selecting it by pressing tabs key it's in the focus mode and when you mouseover it it's in the hover mode.
So to modify t's styling in this three mode, I have shown in example with input:focus,input:hover and input:active selectors and than apply CSS. You can play with it and apply same scenario in your question.

I have also added all three modes for better understanding.

.main {
  display: flex;
  align-items: center;
  justify-content: cenetr;
  flex-direction: column;
  height: 100vh;
}

.allstate>input,
span input {
  border: none;
  border-bottom: 1px solid #c5c5c5;
}

.allstate>input:hover,
.allstate>input:focus,
.allstate>input:active {
  outline: none;
  border-bottom: 1px solid purple;
}

.modes {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.modes span input {
  display: block;
  width: 100%;
}

.active input:active,
.hover input:hover,
.focus input:focus {
  outline: none;
  border-bottom: 1px solid purple;
}

<div class="main">
  <span class="allstate">All states: <input type="text" value="" placeholder="Enter some data" /></span>
  <div class="modes">
    <span class="active">only active state: <input type="text" value="" placeholder="Enter some data" /></span>
    <span class="hover">only hover(mouse over) state: <input type="text"  value="" placeholder="Enter some data" /></span>
    <span class="focus">only focus state: <input type="text" value="" placeholder="Enter some data" />(outline won't appear as it's focus only)</span>
  </div>
</div>

回复收藏 0 原文

~没有更多了~