Chrome CSS -样式化文件输入

pwuypxnk 于 2023-09-28 发布在 Go

关注(0)|答案(3)|浏览(89)

以下是我在Chrome中渲染的文件输入：

在IE中，它看起来更基本，这很好（尽管与这个特定控件的大量不一致令人沮丧！））
我的默认输入CSS是：

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);
}

正如您所看到的，控件上有两种类型的文本，是否可以分别设置这两种文本的样式？
另外，是否有任何方法可以专门选择文件输入？像input.file（似乎不起作用）。如果这是不可能的，我如何删除所有的CSS输入样式已应用于它（所以我的工作是一个空白的石板了）。

google-chrome

来源：https://stackoverflow.com/questions/4860865/chrome-css-styling-file-input

3条答案

按热度按时间

xwmevbvl1#

虽然我从来没有实现它的任何地方，但在研究有关相同的我遇到了这个网址
http://pixelmatrixdesign.com/uniform/
这也许能帮到你

赞(0）回复(0）举报 2023-09-28

ni65a41a2#

你不能区分IE中的输入类型。在最近的浏览器中，你可以用css3属性选择器来实现它：

input[type=button] {
   border: 15px solid Red;
}

你可以做的是手动添加一个css类到你的文件输入：

<input type="file" class="inputFile" />
.inputFile { color: Yellow; }

赞(0）回复(0）举报 2023-09-28

p8h8hvxi3#

对于完全定制（例如，改变浏览按钮的外观），你需要使用标签元素技术。
它是完全语义化的，可访问的，不需要JavaScipt。基本上，您隐藏输入，确保在标签和文件字段上都设置了id，然后相应地设置标签的样式。这里有一篇很棒的文章，解释了这项技术沿着一个CodePen（https://codepen.io/bmarshall511/pen/bjyEgq），展示了它是如何完成的：https://benmarshall.me/styling-file-inputs/

[type="file"] + label {
  background: #f15d22;
  border-radius: 5px;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

赞(0）回复(0）举报 2023-09-28

我来回答

Chrome CSS -样式化文件输入

3条答案

相关问题

热门标签

最新问答