Wordpress 表单中的样式问题答案

【问题标题】：Styling issue in a Wordpress formWordpress 表单中的样式问题
【发布时间】：2014-02-11 07:37:09
【问题描述】：

这是my form！ .现在我在“上传简历”行上有“选择文件”按钮和“未选择文件”的图例。我需要那个“选择文件”按钮，让它看起来像实际的背景图像和要删除的图例但我不知道该怎么做！

此外，在前一个表单行中，“选择职位发布”的边框半径与前一个表单框的边框半径不匹配，我也无法更改该属性。

我愿意接受任何解决方案 :)

“选择文件”按钮的实际 CSS 代码是：

input[type="file"] {
background-image: url('http://accountabletest.com/wp-content/uploads/2014/01/upload1.png')              ;
background: no-repeat;
z-index: 99999999999 !important;
}

【问题讨论】：

标签： html css wordpress forms styles

【解决方案1】：

输入试试

input[type="file"] {
  background-attachment: scroll;
  background-clip: border-box;
  background-color: rgba(0, 0, 0, 0);
  background-image: url("http://accountabletest.com/wp-content/uploads/2014/01/upload1.png") !important;
  background-origin: padding-box;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: auto auto;
  color: rgba(0, 0, 0, 0);
  text-indent: -99999px;
  z-index: 2147483647 !important;
}

对于选择尝试：

.dropdown1 {
  background: none repeat scroll 0 0 #F8F8F8;
  border-color: rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.1);
  color: #808080;
  font-family: inherit;
  font-size: 17px;
  font-weight: 100;
  margin-bottom: 5px;
  margin-top: -22px;
  padding: 15px;
  width: 308px;
}

【讨论】：

密钥是color: rgba(0, 0, 0, 0); text-indent: -99999px;
现在“浏览到文件”按钮可以工作并呈现我需要的方式（太棒了，谢谢！）。我仍然需要之前的“第一个工作”下拉按钮边框半径来匹配之前的文本框边框。你有什么想法？。谢谢你:)
,它在 Mozilla 中渲染得很好，但在 Chrome 或 safari 中却不行。
对不起兄弟，但为此你需要在谷歌上搜索更多关于它的信息，或者等我到明天，因为我现在有工作;) 顺便说一句，我建议你按照上面的提示在谷歌上查看，这样你会学到更多。
如果我的回答帮助您记住，请将其标记为正确。干杯！

【解决方案2】：

这将只针对按钮本身。不适用于 -moz- ...但适用于 chrome 和 safari。

使用默认样式上传文件

[文件*上传恢复限制：2097152 文件类型：pdf|doc|docx id：上传文件类：上传文件]

看起来像这样

Default Input File Button

您需要的是这段代码（或者您可以根据需要进行风格化）：

input[type="file"]::-webkit-file-upload-button {
    cursor: pointer;
    background-color: #ff921e;
    border: none;
    width: 150px;
    height: 30px;
    color: white;
    letter-spacing: .05em;
    font-size: 14px;
    font-weight: 300;
}

Styled Input File Button

希望对你有帮助！

【讨论】：