【问题标题】:I am seeking help for CSS trick我正在寻求 CSS 技巧的帮助
【发布时间】: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(不使用图像)来绕过拐角。

请帮帮我...

【问题讨论】:

    标签: 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'
      猜你喜欢
      • 1970-01-01
      • 2021-05-27
      • 1970-01-01
      • 2011-04-13
      • 2019-07-12
      • 2021-01-12
      • 1970-01-01
      • 2010-09-13
      • 2010-09-20
      相关资源
      最近更新 更多