body { margin:0; font-family:sans-serif; font-size:16px; text-align:center; } .container { display:flex; flex-direction:column; justify-content:center; align-items:center; height:100vh; } .incontainer { width:325px; max-width:325px; } h4 { border-radius:4px; color:white; background-color:red; padding:.9em; } input,select { text-align:center; width:100%; padding:12px 20px; margin:3px 0; display:inline-block; border:1px solid #ccc; border-radius:4px; box-sizing:border-box; font-size:16px; font-weight:bold; } select { margin-top:10px; cursor:pointer; padding-top:12px; padding-bottom:-7px; } input[type=datetime-local] { cursor:pointer; margin-bottom:-3px; } input[type=email] { margin-bottom:15px; } input[type=file] { background-color:#4CAF50; color:white; text-align:left; cursor:pointer; } input[type=submit] { background-color:#4CAF50; color:white; padding:14px 20px; margin:10px 0; border:none; cursor:pointer; } .user { display:flex; width:100%; justify-content:space-between; } #logoff { width:100px; } /*::file-selector-button { -moz-opacity:0; filter:alpha(opacity:0); opacity:0; }*/ .fileinput { position:relative; max-width:fit-content(325px); } #name { padding-top:5px; color:white; font-weight:bold; width:100%; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } input.abs { background-color:#4CAF50; padding:14px 20px; margin:8px 0; border:none; border-radius:4px; cursor:pointer; font-size:16px } .abs { position:absolute; top:0px; left:0px; z-index:1; } #input { position:relative; -moz-opacity:0; filter:alpha(opacity:0); opacity:0; z-index:2; }