Round clickable area

http://stackoverflow.com/a/29010691/4402222

by Ram Tobolski

HTML

User should not be able to activate the file input by clicking on the blue area, only the red area.
<div class="sqr"><input class="file" type="file"/></div>

CSS

.file {
	box-sizing:border-box;
	-moz-box-sizing:border-box;
    position: absolute;
    top: 0px;
    bottom: 0px;
    background: rgba(200,40,40,1);
	width:100%;
	border-radius:50%;
	padding-top:45%;
	padding-left:20%;
}

.sqr {
    position: relative;
    height: 300px;
    width: 300px;
    background: rgba(40,40,200,1);
}