我想通过在输入的末尾添加一个点来设置输入的样式。与下图相同
我试着为:before:after添加一些样式,但我无法弄清楚
.parent {
max-width: 352px;
width: 100%;
}
.children {
display: flex;
align-items: center;
width: 100%;
margin: 10px 0;
}
.line {
width: 100%;
height: 1px;
background-color: red;
}
.the-dot {
width: 1px;
height: 1px;
background-color: red;
border-radius: 999px;
}
.children input {
border: none;
border-bottom: 1px solid;
margin-right: 5px;
flex-grow: 1;
}
<div class="parent">
<div class="children">
<input type="text" placeholder="Type something...">
<div class="line"></div>
<div class="the-dot"></div>
</div>
</div>
4条答案
按热度按时间x8goxv8g1#
您可能不需要使用flex-container进行设置,相反,我们可以使用
position: relative
为点元素创建一个锚,在我的示例中,它将是一个伪元素。我的解决方案就是基于这个假设。对于红点的位置,我们可以用途:
这将把它放在右下角。
接下来,我使用以下命令将元素居中:
考虑到元素比例,元素将被放置在正中间。然而,从视觉上看,输入的底线看起来差了一个像素,我们可以手动调整点从
bottom: 1px
开始。nhaq1z212#
在没有使用flex和将点嵌套在行内的情况下,我最终得到了这样的结果:
busg9geu3#
只需使用
position: absolute
来定位使用border-radius
和aspect-ratio
创建的点:或者,您可以使用伪元素:
试试看:
gxwragnw4#
一种方法如下,在代码中有解释性注解;这种方法有一个可以论证的好处,即通过使用
<label>
元素来环绕<input>
并删除表示元素(.line
和.dot
<div>
元素)来帮助可访问性:JS Fiddle demo。
顺便说一句,我确信这可以通过使用
border-image
属性来实现,但我个人对该属性的理解不够好,无法使用它,也不知道我在用它做什么;其他人可能会及时提供这样的解决方案,我热切期待。参考文献:
background
。background-image
。background-position
。background-repeat
。background-size
。block-size
。border
。border-image
。border-width
。box-sizing
。calc()
。display
。flex-basis
。flex-direction
。flex-flow
。flex-wrap
。font
。font-family
。font-size
。font-weight
。linear-gradient()
。margin
。padding
。padding-block
.padding-block-end
。padding-inline
。radial-gradient()
。