我有一个 Web 表单,我想在其中的输入框前附加货币符号。 货币符号对于有符号的货币可以有 1 个字符,对于没有符号的货币可以有 5-6 个字符。
我正在寻找这样的东西。注意货币符号的移动。
我通过在货币标签上设置 -35 像素的边距实现了这一点。 但这不会迎合其他具有更多字符的货币,如“第纳尔”或“澳元”。然而,对于像 $ 这样的较小长度的货币符号来说,这太长了。
我想将边距设置为元素所占宽度的负数。
我怎样才能做到这一点? 对于此选项,我想坚持使用 CSS 而不是 js。
我应该改变我的样式还是需要对表单布局进行任何更改?
有利的解决方案是使用 CSS,而不更改任何布局或为此编写任何 js 代码。
最佳答案
::before
伪元素怎么样?
.container::before {
content: attr(mark); // get text to insert before .container from mark attribute
}
<div class="container" mark="xoxo">
<input value="00">
</div>
无法从文档范围控制伪元素,但您可以使用 DOM 元素的属性来提供 before
内容,就像我在代码片段中所做的那样。
要更改 :before
内容只需更新 mark
属性。
例如使用 Jquery $('div.container').attr('mark', 'custom text')
关于CSS:基于元素宽度的动态边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40215449/