SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Styling Upload File Input

    I am trying to add space between my Form Input and the Upload Picture button, but it's not working?!

    Here is a snippet...
    Code HTML4Strict:
    	<!-- UPLOAD PHOTO FORM -->
    	<form id="uploadPhoto" action="" method="post">
    		<fieldset>
    			<legend>Upload a Photo</legend>
     
    			<!-- User Photo -->
    			<label for="userPhoto">Filename:</label>
    			<input id="userPhoto" name="userPhoto" type="file" />
    			<?php
    				if (!empty($errors['upload'])){
    					echo '<span class="error">' . $errors['upload'] . '</span>';
    				}
    			?>

    Code CSS:
    /* UPLOAD PHOTO Styles */
    input#userPhoto{
    	padding: 0 10em 0 0;
    }


    What am I doing wrong?


    Debbie

  2. #2
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Don't bother styling form fields, every browsers handles them differently on every OS. Setting them into a specific order is fine. But changing the appearance like changing the browse button on file upload fields will never work.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    I agree with this. Though, there are some good replacement techniques like the gmail 'Attach file'

    Here's an interesting article on topic, to me the downsides make it not that usable.
    http://www.quirksmode.org/dom/inputfile.html

  4. #4
    From space with love silver trophy
    SpacePhoenix's Avatar
    Join Date
    May 2007
    Location
    Poole, UK
    Posts
    5,072
    Mentioned
    103 Post(s)
    Tagged
    0 Thread(s)
    You can change the look of form inputs with css but beaware that for the browse button (for browsing for a file), the style of this can never be changed. The support for what can be done to change the look form elements like has already been said will vary from browser to browser so you should try and test to see what works with what browser for each potential browser version being used by the target audience.
    Community Team Advisor
    Forum Guidelines: Posting FAQ Signatures FAQ Self Promotion FAQ
    Help the Mods: What's Fluff? Report Fluff/Spam to a Moderator

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You guys aren't listening!

    All I want to do is put some SPACE between the Input Box and the Button. (I don't like how they touch each other?!)

    I did not say I wanted to style the Input or Button themselves. I just want some breathing room, and the code posted above has worked in any other Form situation.


    Debbie

  6. #6
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    If you are talking about the "Browse" button, you cannot move it, you cannot change it, cannot do anything with it. Thats the point. If you are talking about another button you created....Thats entirely different.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by logic_earth View Post
    If you are talking about the "Browse" button, you cannot move it, you cannot change it, cannot do anything with it. Thats the point. If you are talking about another button you created....Thats entirely different.
    Really???

    Wow...


    Debbie

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Presumably you have set the label to sit to the right of the input?

    Anyhow, try margin instead of padding:

    Code:
    input#userPhoto{
    	margin: 0 10em 0 0;
    }

  9. #9
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Presumably you have set the label to sit to the right of the input?
    No, see attached...
    Attachment 59091


    Anyhow, try margin instead of padding:

    Code:
    input#userPhoto{
    	margin: 0 10em 0 0;
    }
    That didn't work either.


    Debbie

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    O, I see ... that button is auto-generated by the browser. Hm, you might be out of luck, then.

  11. #11
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:

    Quote Originally Posted by DoubleDee View Post
    You guys aren't listening!
    You always say that to those answering.
    In fact, all 3 of us answered your question from different perspectives.

  12. #12
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    logic_earth got it right the first time... Do you SEE two separate elements in your code? No, you have ONE input of type FILE... So NO, you cannot put a space between the input and it's auto-generated button. That's all ONE HTML element, so styling it there's only ONE thing there -- it exists only ONCE in the DOM -- your margin being applied to the right of the ENTIRE element.

    input[file] -- that's all there is... one single DOM element -- might LOOK like two when rendered (the text box and the button) but it's only actually ONE.

    Again, default appearance has nothing to do with what a tag is or how it works.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •