.js .inputfile { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } .inputfile + label { max-width: 80%; font-size: 1.25rem; /* 20px */ font-weight: 700; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; display: inline-block; overflow: hidden; padding: 0.625rem 1.25rem; /* 10px 20px */ } .inputfile_small { max-width: 80%; font-size: 0.6rem; /* 20px */ font-weight: 700; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; display: inline-block; overflow: hidden; color: #d3394c; /* 10px 20px */ } .no-js .inputfile + label { display: none; } .inputfile:focus + label, .inputfile.has-focus + label { outline: 1px dotted #000; outline: -webkit-focus-ring-color auto 5px; } .inputfile + label * { /* pointer-events: none; */ /* in case of FastClick lib use */ } .inputfile + label svg { width: 1em; height: 1em; vertical-align: middle; fill: currentColor; margin-top: -0.25em; /* 4px */ margin-right: 0.25em; /* 4px */ } /* style 4 */ .inputfile-4 + label { color: #d3394c; } .inputfile-4:focus + label, .inputfile-4.has-focus + label, .inputfile-4 + label:hover { color: #722040; } .inputfile-4 + label figure { width: 80px; height: 80px; border-radius: 50%; background-color: #d3394c; display: block; padding: 20px; margin: 0 auto 10px; } .inputfile-5 + label figure { width: 10px; height: 10px; border-radius: 50%; background-color: #d3394c; display: block; padding: 9px; margin: -5px auto 2px; } .inputfile-5:focus + label figure, .inputfile-5.has-focus + label figure, .inputfile-5 + label:hover figure { background-color: #722040; } .inputfile-5 + label svg { width: 100%; height: 100%; fill: #f1e5e6; } .inputfile-4:focus + label figure, .inputfile-4.has-focus + label figure, .inputfile-4 + label:hover figure { background-color: #722040; } .inputfile-4 + label svg { width: 100%; height: 100%; fill: #f1e5e6; }