Jack McKalling Posted May 22, 2006 Share Posted May 22, 2006 (edited) You know a file element has both a text field and a button. My site has different style to both buttons and text elements, so is it possible to style both parts differently? I tried anyway, but the button part does not color its background for example... <html><head><title>FunLinks - iUpload</title><style>.text { border:inset 2px #c0c0c0; background-color:#ffffff; font-size:12px; width:320px; text-align:left; color:#000080; }.button { cursor:pointer; border:outset 2px #008000; background-color:#99ffcc; font-size:12px; width:70px; text-align:center; color:#000000; }</style></head><body><form enctype="multipart/form-data" action="/profmemberone/Actions/upload_t.php" method="post"><input type="hidden" name="MAX_FILE_SIZE" value="30000" /><input type="file" class="text" name="userfile" /> <button type="submit" class="button">Upload!</button></form></body></html> Edited May 22, 2006 by Dan The Prof Link to comment Share on other sites More sharing options...
pulpfiction Posted May 22, 2006 Share Posted May 22, 2006 This might be useful....http://www.webmasterworld.com/forum83/7217.htmhttp://www.quirksmode.org/dom/inputfile.html Link to comment Share on other sites More sharing options...
Jack McKalling Posted May 22, 2006 Author Share Posted May 22, 2006 (edited) (First like doesn't work, about the second...)Cool sollution, basically an invisible real file input over a shining through image, lolToo bad it uses javascript which I prefer not to use (basically because of user ability to change all javascript). Couldn't they just have made two parts for the file upload? Like they haven't made the submit button part of the form either :blink:But the opacity property is not W3C standard, I doubt if it would work anyway..Second, although this sollution sounds wonderful, my page will be dynamic so position:absolute would interfere. And I can't think of anyway like this one that has no disadvantages. :)I still think there should be a file input that only consists of the browse button, and that it may -but not necessarily- be used in conjunction with a text input, with some sort of <label>-like "for"-attribute pointing to that browse button. Wouldn't that be great? Solves all styling issues, lol (I mean, strip the textinput part of the file input) Edited May 22, 2006 by Dan The Prof Link to comment Share on other sites More sharing options...
pulpfiction Posted May 22, 2006 Share Posted May 22, 2006 Hi Dan, Never thought of this as a problem, since never faced such a situation, yeah you are correct, I know the 2nd one has problems but couldnt find a better soln.sorry couldnt help you more.. Link to comment Share on other sites More sharing options...
Err Posted May 31, 2006 Share Posted May 31, 2006 This link may help Link to comment Share on other sites More sharing options...
Jack McKalling Posted May 31, 2006 Author Share Posted May 31, 2006 What can I do with this? It only discusses the hover pseudo class :)Which I don't really need, I would be happy with static colors already :)Which on their turn only count for the text area of the file element, not the button. Link to comment Share on other sites More sharing options...
Err Posted May 31, 2006 Share Posted May 31, 2006 What can I do with this? It only discusses the hover pseudo class :)Which I don't really need, I would be happy with static colors already :)Which on their turn only count for the text area of the file element, not the button.<{POST_SNAPBACK}> Meh, I did say 'may'... Link to comment Share on other sites More sharing options...
Jack McKalling Posted May 31, 2006 Author Share Posted May 31, 2006 Lol Thanks anyway I am thinking of just using the file input with style defined, that does not apply to both the text and button part. It may even look different in various browsers, but that is not my fault is it Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now