Question

我从这里找到了这段代码：http://www.cssportal.com/form-elements/text-box.htm 但问题是，只要您在文本框内单击，您仍然可以看到文本框的矩形形状。对此有什么解决方法？因此，突出显示将带有圆角的图像

/* Rounded Corner */
.tb5 {
    background: url(images/rounded.gif) no-repeat top left;
    height: 22px;
    width: 230px;
}
.tb5a {
    border: 0;
    width:220px;
    margin-top:3px;
}

Answer 1

这应该仅发生在某些浏览器（例如Google Chrome）中，它旨在帮助提高可用性和可访问性，但它可能会导致某些样式出现问题。您要做的是删除dynamic outlines，如下所示：

input[type="text"] { 
    outline: none;
}

此外，您可以尝试使用psedo-selector包括背景图像更改来突出显示文本框，如：focus

input[type="text"]:focus { 
    background: url(images/rounded-focused.gif) no-repeat top left;
}

圆形文本框css

1 个答案: