我正在寻求 CSS 技巧的帮助

Posted 2023-03-06

【中文标题】我正在寻求 CSS 技巧的帮助

【英文标题】：I am seeking help for CSS trick

【发布时间】：2011-11-19 18:40:59

【问题描述】：

我有一些 CSS 代码如下：

input
    background-image:url(css_img/input_bg.gif);
    padding:6px;
    margin:1px;
    width:250px;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
    font-variant:normal;
    height:30px;
    -moz-border-radius:3px 3px 3px 3px;
    -moz-box-shadow:0 2px 3px #DDDDDD;
    border:1px solid #aaa;
    color:#333333;

但是这段代码改变了所有<input type="..."/> 标签的样式。如何更改纯文本字段<input type="text" name="name" /> 的样式？我不想给它们添加类。

还有什么方法可以仅使用在 Internet Explorer 中显示良好的纯 CSS（不使用图像）来绕过拐角。

请帮帮我...

【参考方案1】：

使用attribute selector：

input[type="text"] 
    /* styles here */

【讨论】：

这是正确的吗？输入[type="submit"] 背景图片:url(css_img/ahfrwwh24u6.png);背景重复：不重复；边框：#CCC 0px 实心；填充：4px；颜色：#FFFFFF；光标：指针；字体大小：12px； font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;字体粗细：粗体；

为什么不给元素添加类名？

@Indian Girl：你用的是哪个版本的浏览器？

【参考方案2】：

使用属性选择器：

input[type="text"]  styles here 

【参考方案3】：

正如 Eric 和 Rikudo 所说：

input[type="text"]

对于ie中的角落，使用CSS3 PIE

你也可以使用：

input[type=text]
input[type^=te]
input[type$=ex]
input[type*=t]

具有属性类型的元素输入，其中包含等于、开头、结尾或包含某个值的值。

更多信息here

【讨论】：

我正在使用两个像上面一样的 CSS。一个是 input[type="text"]..code.. 另一个是 input[type="submit"]..code.. 但仍然不能仅在 Internet Explorer 上工作？为什么。我的 CSS 在外部 css 文件中

input[type$=ex] 不起作用。使用$=，您正在尝试搜索词尾ex，但在input type='text' 中，您应该写$='xt'。