【问题标题】:Oversize cursor in Firefox form with textbox background image带有文本框背景图像的 Firefox 表单中的超大光标
【发布时间】:2010-05-27 09:46:59
【问题描述】:

我在文本框上有一个带有背景图像的网络表单,以便为它们提供一个漂亮的圆角。在 Chrome 中,文本框按预期工作,但是,如果我在 Firefox 中查看表单,光标的大小会显示为图像的高度,但文本是正常大小。

有没有办法覆盖这个过大的光标?

这是文本框的 CSS:

    .ed_form_textbox {
    width:319px;
    height:34px;
    margin-bottom:10px;
    padding-left:10px;
    background: transparent url( "/images/textbox.png" ) no-repeat bottom left;
    position:relative;
    border:none;
}

谢谢。

这是来自 Firefox Web Developer 的样式信息:

.ed_form_textbox (line 54) {
width: 319px;
height: 34px;
margin-bottom: 10px;
padding-left: 10px;
background-color: transparent;
background-image: url("/images/textbox.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: left bottom;
position: relative;
border-top-width: medium;
border-right-width-value: medium;
border-right-width-ltr-source: physical;
border-right-width-rtl-source: physical;
border-bottom-width: medium;
border-left-width-value: medium;
border-left-width-ltr-source: physical;
border-left-width-rtl-source: physical;
border-top-style: none;
border-right-style-value: none;
border-right-style-ltr-source: physical;
border-right-style-rtl-source: physical;
border-bottom-style: none;
border-left-style-value: none;
border-left-style-ltr-source: physical;
border-left-style-rtl-source: physical;
border-top-color: -moz-use-text-color;
border-right-color-value: -moz-use-text-color;
border-right-color-ltr-source: physical;
border-right-color-rtl-source: physical;
border-bottom-color: -moz-use-text-color;
border-left-color-value: -moz-use-text-color;
border-left-color-ltr-source: physical;
border-left-color-rtl-source: physical;
font-size: 12px; 
}

.ed_form_textbox:focus (line 65) {
outline-width: medium;
outline-style: none;
outline-color: -moz-use-text-color;
}

【问题讨论】:

  • 你指的是鼠标光标还是文本光标(=插入符号)?你有一个我们可以查看的网址吗?
  • 您应该在 CSS 选择器中使用连字符而不是下划线。看这里。 developer.mozilla.org/en/Underscores_in_class_and_ID_Names
  • 不幸的是,表单 CSS 是由 Umbraco 包动态创建的,我无法更改 CSS 类名。

标签: css firefox forms background-image


【解决方案1】:

如果您希望插入符号(文本光标)更小,则需要在您的班级中添加 font-size:

【讨论】:

  • 页面上还有其他样式吗?
  • 我已经从 Web Developer CSS 检查器中添加了样式
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-08-22
  • 1970-01-01
  • 1970-01-01
  • 2014-07-13
  • 2014-09-04
  • 1970-01-01
相关资源
最近更新 更多