【问题标题】:right aligned text in a input输入中的右对齐文本
【发布时间】:2013-01-02 22:41:05
【问题描述】:

我正在开发一个网站,设计师在输入表单中放置了一些额外的文本

我的代码:

<form id="hmail">
    <input autocapitalize="off" autocorrect="off" autocomplete="on" type="text" name="register" id="getemail" value="your company" onFocus="if(this.value==this.defaultValue)this.value='';" onBlur="if(this.value=='')this.value=this.defaultValue;"/>
    <input type="submit" id="sendmail" value="Claim">
</form>

我在想一些像 value="...dock.com" 和浮动的东西,对吗? 只有我似乎无法让这个工作

【问题讨论】:

  • “dock.com”是否也必须在焦点上消失,还是应该一直存在?
  • 它必须一直存在:)

标签: html css forms input


【解决方案1】:

通过 CSS 实现“dock.com”作为背景图片;类似:

background-image:url(dockimage.png); 
background-repeat:no-repeat; 
background-position:right;

【讨论】:

    【解决方案2】:

    将背景图像设置为文本,如下所示:

    input[name=theName] {
        background: #fff url(path/to/bg.jpg) no-repeat right center;
    }
    

    并在输入上设置最大长度以防止输入的文本超出背景。

    【讨论】:

    • maxlength 对此不可靠。将 llllllllll 与 WWWWWWWWWW (均为 10 个字符)进行比较。相反,请使用padding-right,其值比背景图像宽度稍大。
    • 为我工作,只有不重复的右中心,我同意 padding-right 是一个更好的解决方案
    猜你喜欢
    • 2021-07-19
    • 2011-06-25
    • 1970-01-01
    • 2016-02-27
    • 2018-12-08
    • 2014-06-07
    • 1970-01-01
    • 2012-04-06
    • 2014-01-10
    相关资源
    最近更新 更多