带有文本框背景图像的 Firefox 形式的超大光标
我有一个网络表单,文本框上有背景图像,给它们一个漂亮的圆角。在 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;
}
I have a webform with background images on the textboxes to give them a nice rounded corner. In Chrome the textboxes work as expected, however, if I view the form in Firefox the cursor appears to size to the height of the image, but the text is a normal size.
Is there a way to override this oversized cursor?
Here is the CSS of the textbox:
.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;
}
Thanks.
Here's the style information from 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;
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
如果您希望插入符号(文本光标)更小,您需要在您的类中添加一个
font-size:
。You will need to add a
font-size:
to your class if you want the Caret (text cursor) to be smaller.