File upload css issue - html

I want to have a file upload using php. my problem simple in the CSS I make:
<input name="ufile" type="file" id="ufile" size="50" />
it just show the browse button.
I want to have like a text box with the browse button to show the file address after upload it.
I know that :
<input name="ufile" type="file" id="ufile" size="50" />
will show the text box as will as the browse button but I tried it on firefox and chrome nothing showed just the button not text box. does anybody have any idea about that? why the text box is not shown???

I've tested your html above and it worked in Firefox and IE 9. My guess is that you have some CSS within your webpage that is affecting the file input. You could try use Firebug of developer tools in Chrome to inspect the input to see what css rules are being applied.

Related

"for" attribute not working inside button for Firefox

I want to customize the input element by changing the text to "Choose file ..." and hide the file's name. Also if a user click the button a window is opened for user to choose file. The code is
<button>
<label for="upload"> Choose file ... </label>
</button>
<input type="file" id="upload" style="display:none">
With Chrome, if I click the button a window is popped up for me to choose the file. However it doesn't work with Firefox and IE. Do you know how can I make it work for all three browsers? Thank you.
The label tag does not work for buttons. It is by and large used with radio buttons. The below should do what you are looking for:
<button id="btnFile" onclick="upload.click();">
Choose file ...
</button>
<input type="file" id="upload" style="display:none">
Your HTML is invalid. A label cannot be a descendant of a button.
Remove the button:
<label for="upload"> Choose file ... </label>
<input type="file" id="upload" style="display:none">
(Tested in Firefox. I don't have a copy of IE to hand.)
If you want something that looks like a button, then style it that way with CSS.

Odd browser compatibility issue with IE/Firefox

I have a login script based on PHP and Javascript. I couldn't figure out for the longest time why it would work in chrome and safari but not in firefox or internet explorer. I finally figured out the issue is with the html, instead of having the regular submit button I have an image for submit. and simply changing type="image" to type="submit" resolves the issue. Does anyone know why this is and if there's a compatible way to write the following
This works:
<input name="doLogin" type="submit" style="margin-left:90px;" id="doLogin3" value="Login">
This does not:
<input name="doLogin" type="image" src="login-btn.png" style="margin-left:90px;" id="doLogin3" value="Login">
if you are not going to be using js to submit your form, then the input type for your submit button should be submit. but if you really must have an image in place of your button, just position the image with css by setting it as the background of your button. no need to change input type to image. hope that helps.

How to make a html speech button

So am trying to make an html5 speech button
i want something like that button in Google translate website
http://translate.google.com if you visited the website in chrome you will find a speech to text input the one that Google offers with chrome browsers
so i took a look at the HTML code and i found this
<input id="gt-speech-in" type="text" speech="speech" x-webkit-speech="x-webkit-speech"
x-webkit-grammar="builtin:translate" size="1" lang="en" style="" tabindex="-3">
which does not output a button like it was in translate.google it just outputs a small text input
so how can a change it into a button or make it smaller so it can look like a button?
In Chrome the snippet above does display the input microphone, and you can control the size of the text entry field in the style eg:
<input id="gt-speech-in" type="text" speech="speech" x-webkit-speech="x-webkit-speech"
x-webkit-grammar="builtin:translate" size="1" lang="en" style="width:200px;" tabindex="-3">
Are you trying to get anythng additional to display on the form (or get it to work in a non-Chrome environment)?

HTML file selector(input type="file") button doesn't display correctly in chrome browser

I have a html file selector in index.php file.Code is given bellow
//index.php (This is just an example)
<form enctype="multipart/form-data" action="http://myserver/abc/upload.php" method="POST">
Select image to upload :
<input name="photo" type="file" size="30" width="250">
<input type="submit" value="Upload"/>
</form>
In firefox browser I can see file selector with a text field(which display the file path) and a button named 'Browse'(As a normal file selecting field)
But in chrome browser I can't see the text field.And button name is 'Chose file' not 'Browse'.
How can I fix this?
I need to display this in all browsers as it is display in firefox browser
there is no standard way of customizing file input style, but you can find a tons of css/js tricks. use keywords: custom css file input
Change your file type by adding this inline style
<input name="photo" type="file" size="30" width="250" style="line-height:0;">

How to style a file upload?

In firefox it looks like a text field that you click on and i just need a button like safari renders..Is there a way to not display the text field looking file upload in firefox
Asked many times before:
How can I style a file input field in Firefox?
Styling an input type="file" button
How to style "input file" with CSS3 / Javascript?
https://stackoverflow.com/questions/3984815/jquery-best-way-to-style-a-input-file-tag
Can we change <input type="file"> style?
Style of input=File as a button