css - 如何使用 CSS 为这个 Input 元素添加前缀

Question

我有一个由 Zend Form 生成的表单元素，如下所示：

<dd id="website-element">
    <input type="text" class="pre-http" value="bigshop.com.au" id="website" name="website">
</dd>

有什么方法可以使用 CSS 在输入元素之前加上文本“http://”？（我希望用户在没有前导“http://”的情况下进入网站）。

谢谢...

score 1 · Accepted Answer

尝试这个：-

使用:before伪元素

#website-element:before
{
content:"http://";
}

:before 创建一个伪元素，它是匹配元素的第一个子元素。通常用于通过使用 content 属性向元素添加装饰性内容。默认情况下，此元素是内联的。

所以它需要在文本框的父级上。

score 0 · Accepted Answer

http://取决于：您是否希望在提交时为输入值添加前缀？如果是这样，您将不得不为此使用 Javascript。

否则，你可能会使用这样的东西：

.pre-http:before {
    content:"http://";
    /* any other styles you'd like to apply to the text */
}

2 回答 2