Chrome CSS - 样式文件输入 [英] Chrome CSS - Styling File Input

问题描述

这是我在Chrome中输入的文件输入：

>

我输入的默认CSS为：

  input {
字体家庭：arial，sans-serif; 
 font-size：12px; 
 font-weight：bold; 
颜色：白色; 
 background-image：url（../ images / buttonBG.png）; 
 height：27px; 
 border：1px solid＃000; 
 border-radius：7px; 
 -moz-border-radius：7px; 
 padding：5px 20px 5px 20px; 
 -webkit-box-shadow：0px 1px 3px rgba（0，0，0，0.5）; 
 -moz-box-shadow：0px 1px 3px rgba（0，0，0，0.5），inset 0px 1px 0px rgba（255，255，255，0.5）; 
 box-shadow：0 1px 3px rgba（0，0，0，0.5），inset 0px 1px 0px rgba（255，255，255，0.5）; 
 text-shadow：0px 1px 2px＃000; 
} 
 input：hover {
 text-shadow：0px 1px 2px #fff; 
 background-image：url（../ images / buttonBGo.png）; 
 
 
 
 
 
 $ b 
你可以看到控件上有两种类型的文本，可以单独设计风格？
 
 
 
还有什么方法可以专门选择文件输入吗？像input.file（似乎并没有工作）。如果这是不可能的，我该如何删除输入样式应用到的所有CSS（所以我再次使用空白的平板）。
 
解决方案虽然我从来没有在任何地方实现过，但是在研究相同的情况下，我遇到了这个url  
 
 
  http://pixelmatrixdesign.com/uniform/  
 
 
 
这可能会帮助你。 > 
Here is my file input rendered in Chrome:



In IE it looks a lot more basic, which is fine (although the vast inconsistencies with this particular control are frustrating!)

My default CSS for inputs is:
input{
    font-family: arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color:White;
    background-image:url(../images/buttonBG.png);
    height:27px;
    border:1px solid #000;
    border-radius: 7px;
    -moz-border-radius: 7px;
    padding: 5px 20px 5px 20px;
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.5);
    text-shadow: 0px 1px 2px #000;
}
input:hover{
    text-shadow: 0px 1px 2px #fff;
    background-image:url(../images/buttonBGo.png);
}
As you can see there are two types of text on the control, is it possible to style both individually?

Also is there any way to specifically select file inputs?  Like input.file (doesn't seem to work).  If this is not possible, how do I remove all the CSS the input style has applied to it (so I am working with a blank slate again).
解决方案
Though i have never implemented it anywhere but while studying about the same i came across this url

http://pixelmatrixdesign.com/uniform/

This might help you out.

                        
这篇关于Chrome CSS  - 样式文件输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！