there is something in front of the background inside the file button-CodePudding

enter image description here

<input type="file" name="imgfile" id="imgupload"   data-toggle="tooltip" data-placement="bottom" title="Add Picture" />

#imgupload {
    background: url('../img/camera.png') no-repeat scroll 0 0 transparent;
    cursor: pointer;
    height: 30px;
    width: 30px;
    font-size: 0px;
    border-radius: 50%;
    border: 0px;
    background-size: 27px 27px;
}

I put a picture inside the upload button, but there is a small detail on the edge. How do I prevent it from showing up?

CodePudding user response：

That is the default file icon showing up. to remove it add this to your CSS:

#imgupload::file-selector-button {
  display: none;
}