I am wondering how to hide the text field portion of a standard html file upload tag
for example
<input type="file" name="somename" size="chars">
This generates obviously a text field and next to that field is a browse button... I want to hide the text field part but keep the button.
This will surely work i have used it in my projects.I hope this helps :)
<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />
I'd recommend hiding the whole thing and putting a separate button object which, when clicked, will end up clicking the input's browse button.
You can do this with CSS and javascript -- check out this article (actually the second time I've used this reference today).
The easiest way as not mentioned in any answer would be to use a label for the input.
<input type="file" name="myFile" id="myFile">
<label for="myFile">Choose your file</label>
input[type="file"] { display: none; }
Using label will be useful because clicking on the label is clicking on the input.
This will only work when input's id is equal to label's for attribute.
You can put an image as a background for the button.
That worked for me, a while ago.
The file input button is extremely difficult to style and manipulate, mainly for security reasons.
If you really need to customize your upload button, I recommend a Flash based uploader like SWFUpload or Uploadify that enables you to use a custom image as button, display a progress bar, and other things.
However, its basic philosophy differs from just embedding a control into a form. The uploading process takes place separately. Make sure you check out first whether this works for you.
DEMO
Pure css and html
The trick is to use a button above the input file button.
Plus, you should set
filter: alpha(opacity=0);
to the input file.
You could possibly hide the whole element and show a button or link instead. This is rather easy.
<input type="file" name="file" id="fileupload" style="width:200px; display:none;" onchange="submitmyform();" />
<input type="button" value="Select an Image" onclick="$('#fileupload').click();" />
The file upload element is hidden. The button will fire the click event and shows the file browser window. On selecting a file, the change event is fired and this can submit a form or call a script function, whatsoever.
Hope this helps...
input[type="file"] { outline: none; cursor: pointer; position: absolute; top:0; clip: rect(0 265px 22px 155px); } /* Hide input field */
#-moz-document url-prefix()
{
input[type="file"] { clip: rect(0, 265px, 22px, 125px); } /* Mozilla */
}
* > /**/ input[type="file"], x:-webkit-any-link { clip: rect(0, 86px, 22px, 0); } /* Webkit */
This will do the same without JavaScript, but requires absolute positioning to use the clip property.
References
Custom Upload Button
CSS Wikibook: Clipping
If you are using jQuery, have a look at this plugin - https://github.com/ajaxray/bootstrap-file-field
It will display the file input field as a bootstrap button and will show selected file names beautifully. Additionally, you can set various restrictions using simple data-attributes or settings in js.
e,g, data-file-types="image/jpeg,image/png" will restrict selecting file types except jpg and png images.
Try adding this css to your input
font-size: 0;
Hello I get inspired by #shiba and here is solution in Angular 9:
<input type="file" [id]="inputId" class="form-control" [style.display]="'none'"
[accept]="acceptedDocumentTypes" [multiple]="true" #fileInput
(change)="fileChange($event)" (blur)="onTouched()">
<input type="button" class="form-control" value="Browse..." (click)="fileInput.click()"/>
you can set it's content to empty string
like this :
<input type="file" name="somename" size="chars" class="mycustominput">
and in your css file :
.mycustominput:after{
content:""!important;
}
You can hide the text behind the button changing the buttons width to 100% using the webkit-class. The button will then overlap the <span> behind itself on the shadow-root.
There is no need to apply any opacity, transparency or hidden attribute to the button, it's just a bit different to style compared to other objects and this will keep the localisation of the form element alive.
This will do the trick and is supported (MDN):
input[type=file]::-ms-browse { /* legacy edge */
width: 100%;
}
input[type=file]::file-selector-button { /* standard */
width: 100%;
}
input[type=file]::-webkit-file-upload-button { /* webkit */
width: 100%;
}
Related
<span id = "referralValue">
<input type="number" name="value" value="0.00">
</span>
Hi all,
I currently have the following code. When you hover over the input box, there are 2 icons on the right hand of the box which you can toggle up and down to increase/decrease a value. I am unsure how to display the up and down buttons that increase/decrease values permenantly via CSS.
Any ideas.
You can achieve this using following CSS (in Chrome):
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: 1;
}
for more information click here
Target the spin buttons and set the Opacity to 1.
<style>
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: 1;
}
</style>
<span id = "referralValue">
<input type="number" name="value" value="0.00" min="" max="">
</span>
Set the min and max values according to your convenience.
If you really want to have the arrow up and down permanently, you will need to build your own solution for that using Javascript and CSS.
There is already something similiar called HTML5 Number polyfill.
If you are already using jQuery or can use it, you should have a look at that.
I am using this code to try and submit a value via form but it doesn't seem to submit anything...
I would normally use a checkbox or Radio buttons for multiple options but I want to use an image to do this.
Is this code wrong?
<input id="test1" name="test1" type="image" src="images/f.jpg" value="myValue" alt="" />
So I want to pass the value in value="myValue".
The form works fine so that's not the problem, I just need help with the input part not submitting as I know that works.
Thanks
An input type="image" only defines that image as the submit button and not as an input that can carry over a value to the server.
Using the type="image" is problematic because the ability to pass a value is disabled. Although it's not as customizable and thus as pretty, you can still use your images ao long as they are part of a type="button".
<button type="submit" name="someName" value="someValue"><img src="someImage.png" alt="SomeAlternateText"></button>
I was in the same place as you, finally I found a neat answer :
<form action="xx/xx" method="POST">
<input type="hidden" name="what you want" value="what you want">
<input type="image" src="xx.xx">
</form>
I've found that image-buttons DO return a response, but you should NOT use a value-option. What I see returned are two version of the name="MYNAME" with .X and .Y endings.
For example:
<input type="image" src="/path-to/stop.png" name="STOP" width="25" height="25" align="top" alt="Stop sign">
This is within your <form> to </form>. If you click the image, what's returned are STOP.X and STOP.Y with numeric values. The existence of either indicates the STOP image-button was clicked. You don't need any special code. Just treat it as another kind of "submit" button that returns a pair of augmented NAMEs.
I've tried this on Safari, Firefox and Chrome. The image wasn't displayed with Safari, but where it was supposed to be located, my cursor turned into a finger-icon, and I could click it.
Some browsers (IIRC it is just some versions of Internet Explorer) only send the co-ordinates of the image map (in name.x and name.y) and ignore the value. This is a bug.
The workarounds are to either:
Have only one submit button and use a hidden input to sent the value
Use regular submit buttons instead of image maps
Use unique names instead of values and check for the presence of name.x / name.y
Here is what I was trying to do and how I did it. I think you wanted to do something similar.
I had a table with several rows and on each row I had an input with type image. I wanted to pass an id when the user clicked that image button. As you noticed the value in the tag is ignored. Instead I added a hidden input at the top of my table and using javascript I put the correct id there before I post the form.
<input type="image" onclick="$('#hiddenInput').val(rowId) src="...">
This way the correct id will be submitted with your form.
Inputs of type="image" don't send their name/value pair when used to submit the form. To me, that sounds like a bug, but that's how it is.
To get around this, you can replace the input with a button of type="submit", and put a img element inside.
Unfortunately, that causes your image to be in a ugly HTML "button". However, assuming you aren't using the standard HTML button anywhere, you can just override the stylesheet, and then everything should work as expected:
button, input[type="submit"], input[type="reset"] {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
<form action="/post">
<input name="test">
<button type="submit" name="submit_button" value="submitted">
<img src="https://via.placeholder.com/32" alt="image">
</button>
</form>
You could use a radio button/checkbox and set it to hide the button in css and then give it a label with an image.
input[type="radio"] {display: none}
input[type="radio"] + label span {display: block}
Then on the page:
<input type="radio" name="emotion" id="mysubmitradio" />
<label for="mysubmitradio"><img src="images/f.jpg" />
<span>if you need it</span></label>
And then set it to submit using javascript:
document.forms["myform"].submit();
Solution:
<form name="frmSeguimiento" id="frmSeguimiento" method="post" action="proc_seguimiento.php">
<input type="hidden" name="accion" id="accion"/>
<input name="save" type="image" src="imagenes/save.png" alt="Save" onmouseover="this.src='imagenes/save_over.png';" onmouseout="this.src='imagenes/save.png';" value="Save" onclick="validaFrmSeguimiento(this.value);"/>
function validaFrmSeguimiento(accion)
{
document.frmSeguimiento.accion.value=accion;
}
Regards,
jp
well if i was in your place i would do this.I would have an hidden field and based on the input image field i would change the hidden field value(jQuery), and then finally submit the hidden field whose value reflects the image field.
You could use formaction attribute (for type=submit/image, overriding form's action) and pass the non-sensitive value through URL (GET-request).
The posted question is not a problem on older browsers (for example on Chrome 49+).
Add this
name="myvalue"
To your tag.
To submit a form you could use:
<input type="submit">
or
<input type="button"> + Javascript
I never heard of such a crazy guy to try to send a form using a image or a checkbox as you want :))
I want a <p> tag (or a label might be correct actually) to appear behind an input field so that I can show the active caret on the input field and then hide the absolutely positioned <p> tag when the user starts to typing.
you can see what the problem is here: http://jsfiddle.net/captainill/BG7Kx/
In the jsfiddle I've given the input a value to illustrate the problem although in the solution there'd be no default text in the input.
relevant html:
<form name="tagset-form" id="tagset-form" action="" method="get">
<p class="form-p-text">Add Set Name</p>
<input id="tagset-name" class="text-input" type="text" value="some text that I would like to be above the <p> tag">
<input id="tagsubmit" type="submit" value="" style="display:none;">
</form>
css:
input#tagset-name{
width:100%;
height:14px;
padding:8px;
line-height:15px;
color:black;
z-index: 2;
}
input:focus#tagset-name{
color:white;
}
.form-p-text{
z-index: 1;
position:absolute;
top:8px;
left:180px;
color:blue;
font-weight:bold
}
EDIT:
this jquery plugin does exactly what I want:
http://o2v.net/blog/jquery-formlabels-plugin
It does so by creating a label, which when clicked, calls focus() on the input. It looks sharp too.
You could try the HTML5 placeholder attribute for <input>s, depending on how supported you want this to be.
http://diveintohtml5.ep.io/forms.html
Example:
<input type="text" placeholder="John Smith" name="full_name" />
Otherwise you can take a look at the onblur and onfocus events for <input>.
Problem explanation
The thing is that you set color:white on the input field when it has focus. That's why caret (as well as content value text) disappears when in focus. It's still there though. It's just not visible. If you'd type some text in and then double click input you'd see that edited text exists (selecting it will make it visible)
A possible non-HTML5 scripted approach
You probably want to set some init text and then reset it when input has focus. And afterwards to stay as user set it. This very simple jsFiddle shows how. It uses jQuery to acomplish desired behaviour. You could as well adopt it to set init text back to what it was when input stays empty. But my simple example doesn't do that. It's rather trivial to do that as well by binding blur event to input as well, that would check value and when empty remove the CSS class and set init text back in.
It does use some scripting though. I don't think this can be done purely by HTML+CSS. It would when input was a container element so you could use pseudo elements ::before or ::after.
I am using an <input readonly="readonly">, styled as normal text to remove the appearance of an interactive field, but still display the value.
This is very useful to prevent a user from editing a field, while still being able to post the value. I realize this is a convenience method and that there are several workarounds, but I want to use this method.
Problem: The blinking caret still appears when the field is clicked/focused. (At least in FF and IE8 on Win7)
Ideally, I would like it to behave as it normally does, focusable, but without the blinking caret.
Javascript solutions welcome.
On mine there is no caret or so:
<input type="text" value="test" readonly="readonly" >
Take a look at this: http://www.cs.tut.fi/~jkorpela/forms/readonly.html
Sorry, now I understand your problem.
Try this:
<input type="text" value="test" onfocus="this.blur()" readonly="readonly" >
You can use this in your css, but it will not focus:
[readonly='readonly'] {
pointer-events: none;
}
You can remove the blinking caret by specify the css attribute into transparent
caret-color: transparent;
you can test the result here
It can be done using html and javascript
<input type="text" onfocus="this.blur()" readonly >
or jQuery
$(document).on('focus', 'input[readonly]', function () {
this.blur();
});
the only way i found for this was
//FIREFOX
$('INPUT_SELECTOR').focus(function () {
$(this).blur();
});
//INTERNET EXPLORER
$('INPUT_SELECTOR').attr('unselectable', 'on');
KENDO
$('.k-ff .k-combobox>span>.k-input').focus(function () {
$(this).blur();
});
$('.k-ie .k-combobox>span>.k-input').attr('unselectable', 'on');
The onfocus/blur method works ok to remove the cursor from a readonly field, but the browser does not automatically refocus on the next field, and you may lose focus altogether, which is not what the user usually expects. So, if this is required, you can use plain javascript to focus on the next field you want, but you have to specify the next field:
<input type="text" name="readonly-field" value="read-only"
readonly onfocus="this.form.NextField.focus()">
Where 'NextField' is the name of the field to goto. (Alternatively, you could provide some other means to locate the next field). Obviously, this is more involved if you want to navigate to some non-visible UI element, like a tab-panel, as you will need to arrange this as well.
Easy!
Just add disabled to input and it will not be clickable (focused)
I came upon a revelation the other day. When attempting to create a submit button by using an image, I ran into a problem where the image was not displayed but the value text was. At the time, this is not what I wanted, but now, as I look back, I see some potential use for this.
If you need to send data to another page, but none of it requires user input, you can either send it in the link (or form) via GET or through a form via POST. The problem is that the former creates ugly URLs and the latter requires a submit button that looks out of place. Of course, I could come up with an image, but what if I just wanted selectable text.
So, I started playing around a bit and Firefox appears to render the following how I desire, as a clickable link that submits a form. All you have to do is remove the src attribute from the input type='image' tag:
<form action='some_page' method='post'>
<input type='hidden' name='email_address' value='test#test.com' />
<input type='image' value='E-mail User' />
</form>
Does this solution work on other browsers? What are the downsides to doing this (aside from the obvious fact that your link CSS isn't applied properly)?
There's no need to use an image input, why not just use a regular submit button and apply some heavy-handed styling to make it look like regular text?
<input type="submit" value="E-mail User" class="link">
<style>
input.link {
border: none;
background: none;
cursor: pointer;
/* etc */
}
</style>
I like a solution that uses an actual link (hidden) that gets exposed via javascript in conjunction with a button inside a noscript tag.
<form action="some_page" method="post">
<input type="hidden" name="email_address" value="test#test.com" />
E-mail User
<noscript>
<input type="submit" value="E-mail User" />
</noscript>
</form>
$('submit-link').click( function() {
$(this).closest('form').submit();
return false;
})
.show();
Using HTML 4.01 Strict it worked on FF3.5, but not on IE8 or Chrome. The link works, but there is no text just a blank spot for a missing image.
So, this would appear to be a bad idea, since it may only work on one browser. To me that is a pretty big downside, unless your only market is for Firefox browsers, then, go ahead, great idea. :)
As James Skidmore suggested, it is easy to do an onclick with javascript to submit it as a post.
I would suggest unobtrusive JS, so, if someone doesn't have JS on then it will work as a link, doing a GET submission, but if they have JS then it would change the behavior to be POST with no ugly url change.
Or, as was mentioned the background of the image can blend in with the form background.
You could instead submit the form dynamically via JS, or use a regular submit button with a transparent or white background.