Question

大家好，这是输入类型文件css样式问题的老问题。

这是输入类型文件HTML代码：

<input type="file" name="select_img" class="select_style" />

这是输入类型文件css代码：

.select_style {
    float:left;
    width: 80px;
    height: 27px;
    padding: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    color: rgba(255,255,255,1);
    font: normal 12px/27px "Lucida Grande";
    border: 1px solid rgba(44,81,21,0.24);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background-image: rgba(235,235,235,1);
    background-image: -webkit-linear-gradient(top, #00c714 0%,#008c10 100%);
    background-image: -moz-linear-gradient(top, #00c714 0%,#008c10 100%);
    background-image: -o-linear-gradient(top, #00c714 0%,#008c10 100%);
    background-image: -ms-linear-gradient(top, #00c714 0%,#008c10 100%);
    background-image: linear-gradient(top, #00c714 0%,#008c10 100%);
    -webkit-box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
    -moz-box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
    box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
    }

我问朋友他们说了很多解决办法，但是对我来说并没有充分利用。然后我解决了问题...... ....

Answer 1

输入类型文件HTML代码

<input type="file" class="file-input">

和CSS代码解决了rgb颜色效果的问题：

.file-input {
  color: transparent;
}
.file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.file-input::before {
    width:80px;
    height:27px;
  content: 'Select files';
  color:#fff;
  display: inline-block;
    background-image: rgba(235,235,235,1);
    background-image: -webkit-linear-gradient(top, #00c714 0%,#008c10 100%);
    background-image: -moz-linear-gradient(top, #00c714 0%,#008c10 100%);
    background-image: -o-linear-gradient(top, #00c714 0%,#008c10 100%);
    background-image: -ms-linear-gradient(top, #00c714 0%,#008c10 100%);
    background-image: linear-gradient(top, #00c714 0%,#008c10 100%);
    -webkit-box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
    -moz-box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
    box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  font-weight: bold;
  font-size: 13px;
    line-height:27px;
    text-align:center;
}
.file-input:hover::before {
  border-color: black;
}
.file-input:active {
  outline: 0;
}
.file-input:active::before {

    background-image: rgba(235,235,235,1);
    background-image: -webkit-linear-gradient(top, #008c10 0%,#00c714 100%);
    background-image: -moz-linear-gradient(top, #008c10 0%,#00c714 100%);
    background-image: -o-linear-gradient(top, #008c10 0%,#00c714 100%);
    background-image: -ms-linear-gradient(top, #008c10 0%,#00c714 100%);
    background-image: linear-gradient(top, #008c10 0%,#00c714 100%);
    -webkit-box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
    -moz-box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
    box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
}

body {
  padding: 20px;
}

点击查看here

具有rgb颜色效果的输入类型文件解决方案

1 个答案: