How to style an input="file"?

Question

How to style an input="file"?

Navigation

#1 by (2 votes)
#2 by (2 votes)

2

I would like an input ( <input type='file' > ). Have the appearance of a div with a class which gives it a circle.

circle {
  border-radius: 50%;
  width: 80%;
  height: 0;
  padding-bottom: 80%;
  border-style: solid;
  border-color: #f0f2f7;
}

<div class="circle">
</div>

html css

asked by Enric 22.03.2018 в 17:52

source

2 answers

get distance based on latitude and longitude Modify my Bootstrap form with style

score 2 · Answer 1

You could do it by hiding the input type="file" and styling a label connected to it using the for attribute.

In this way, when you click on the label (which you can stylize), the input type="file" event that is hidden will be launched and allow you to choose a file.

#fichero{
  display: none;
}

.circle{
  display: inline-block;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background-color: red;
  cursor: pointer;
}

<input id="fichero" type="file">
<label for="fichero" class="circle"></label>

NOTE: Note that the ID of the input must be the same as the value of the attribute for of the label .

score 2 · Answer 2

In this case then apply certain styles to the divs, so that the input file will not appear if not the circle you want

.fileContainer {
    overflow: hidden;
    position: relative;
}

.fileContainer [type=file] {
    cursor: inherit;
    display: block;
    font-size: 999px;
    filter: alpha(opacity=0);
    min-height: 100%;
    min-width: 50%;
    opacity: 0;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0;
}

.fileContainer {
    border-radius: 50%;
  width: 80%;
  height:0;
  padding-bottom: 80%;
  border-style: solid;
  border-color: #f0f2f7;
  background:gray;
}

.fileContainer [type=file] {
    cursor: pointer;
}

<div class="fileContainer">
    <input type="file"/>
</div>