Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
Please see the image above. I have had this problem for a few times. The text never alines with the button.
How can we change it so that they will aline?
The code is simply:
<td><label>Image/Avatar Upload</label></td>
<td><input type="file" name="avatar"></td>
and the css:
input {width: 350px; font-size: 20px; padding: 2px;}
Thanks!
The short answer is: don’t bother trying to style file inputs
The long answer: Completely controlling the styling file inputs have eluded us for years. They have components that fall under what’s called Shadow DOM. We can see them, but we can’t really touch them. The newer input elements (date, time, color, etc.) have the same “problem”.
It should be noted that not every browser styles file inputs the same way. If you really really want to control this element, you have to replace it (google: “replace file input with image”). If you do this, the user will lose the ability to see exactly which file is being uploaded when they’re not interacting with the file input element (due to security reasons, the filename will be accessible via JavaScript, but the path won’t be).