html - 具有图像的输入类型文件的CSS样式

Question

我想在具有 png 浏览图像的文件输入之间留出空间。

  <input type="text" id="file12" name="file12" size=18 maxlength=500> 
   <div class="upload_wrapper" style="float: left;" id="up0">
  <img src="image/browse.png" style="height:30%,width:40%;"/>
  <input  style="width: 100px;height:10px;" id="uploadbtn4" name="pic[]" type="file" class="upload" name="bfile12" onchange="CopyMe(this, \'file12\');"/>
  </div><br>

CSS代码

 <style type="text/css">
 input[type='file'] {
 color: transparent;
 float: right;
 margin-right:23%;
 }
 </style>

这对于没有图像的按钮来说效果很好。图像上传按钮看起来像屏幕截图。

Answer 1

首先，在使用 style="height:30%,width:40%;" 等多个样式属性时，您需要使用分号而不是逗号错了，应该是style="height:30%;width:40%;"

其次，为什么不在图像本身中使用边距？

<img src="image/browse.png" style="height:30%;width:40%;margin:0 23%;"/>

---

最后，我想推荐你在图像中使用一个类并在你的样式表中使用样式:

<img src="image/browse.png" class="your_class" />

.your_class{
  height:30%;
  width:40%;
  margin: 0 23%;
}