I'm trying to do a pretty simple checkbox hack in an HTML email to make some basic in-email interactivity.
Something like the following:
<style>
input:checked + div {
text-decoration: line-through;
}
</style>
<label>
<input type="checkbox" style="display:none"/>
<div>A todo item</div>
</label>
Whenever the todo item is clicked, I can apply some styling marking it
done.
But if I make the todo item a link:
<style>
input:checked + a {
text-decoration: line-through;
}
</style>
<label>
<input type="checkbox" style="display:none"/>
Open Google
</label>
The checkbox isn't toggled when the link is clicked.
Here's a codepen to demonstrate.
Is there any way to get the link to open, and the checkbox to toggle? As this is destined for an HTML email, any javascript solution is off the table.
The answer is: you cannot without JS.
That HTML setup makes nested interactive contents. The fact is that the <a> tag receives the click event and that cancels the click on the label. You need some JS! This way the natural behaviour of the checkbox is not altered, i.e. you can un-click:
<style>
input:checked+a {
text-decoration: line-through;
}
</style>
<label for="myInput">
<input id="myInput" type="checkbox" style="display:none"/>
Open Google
</label>
Working Demo
EDIT
As it is for email and you cant use JS, just add a tabindex to a tag and a css. Its the closest you can get without using javascript
Working Demo below:
label {
display: block;
padding: 10px 0;
}
input:checked + div{
text-decoration: line-through;
}
a:focus{
text-decoration: line-through;outline:0;}
<label>
<input type="checkbox" style="display:none"/>
<div>Todo Item</div>
</label>
<label>
<input type="checkbox" style="display:none"/>
<div>Another todo Item</div>
</label>
<label>
<input type="checkbox" style="display:none" id='btnControl'/>
Open Google
</label>
JS
function myFunction() {
document.getElementById("me").style.textDecoration = "line-through";
}
HTML
<label>
<input type="checkbox" style="display:none"/>
<a href="http://www.google.com" id="me" onclick="myFunction()" target="_blank">Open
Google</a>
</label>
I have successfully changed the width and height of input file tag by using different instructions available online. But when I display text on my button the <input type="file"> does not remain click-able.
This is my HTML code
<button id="fileInput">
<label><strong>Browse</strong></label>
<input type="file" value="Browse"/>
</button>
This is my CSS
#fileInput{
z-index: 9;
width: 250px;
height:40px;
overflow: hidden;
padding:0px;
margin-left:10px;
margin-top:0px;
}
#fileInput input{
margin:0px;
height:50px;
opacity:0;
z-index: 99;
width:350px;
}
#fileInput label strong{
z-index:100;
font-size:30px;
}
The button is clicked but the <input type="file"> is not clicked.
You tried to put file input into button but I think it doesn't work. So, you can change the view of input instead of adding button, like accepted answer here: How to customize <input type="file">?
Or you can do something ,which I advise , like that:
HTML
<
button id="fileInput"><label><strong>Browse</strong></label> </button>
<input type="file" id="input" style="display:none;"/>
JQUERY
<script>
$(document).ready( function() {
$('#fileInput').click(function(){
$("#input").click();
});
});
</script>
It is changed form of second answer of the question that I gave above.
The HTML
<form id="test_form">
<input type="file" id="test">
<button>Browse</button>
</form>
The CSS
input{position:absolute; top:-100px;}
The JQuery
$("button").click(function() {
$("#test").click();
})
$('#test').change(function() {
$('#test_form').submit();
});
JSFiddle: http://jsfiddle.net/yboss/WxYLA/1/
Is it possible to style an active label with just CSS using the following markup:
<label class="inputOption" for="1"><input type="radio" name="radio1" id="1" /><span class="aText">Option 1</span></label>
I want to add some background styles to the label once the radio inside is selected. Prefer not to use javascript. It is for mobile so it doesn't have to work on older browsers.
For this your can use CSS :checked property for this. Write like this:
#one{
position:relative;
}
#one:checked + span{
display:inline-block;
margin-left:-20px;
padding-left:20px;
background-color: #aa2233;
}
check this http://jsfiddle.net/5TxyJ/5/
Of course, you should add also a second class, let`s say "active" to the label, only when the radio button is selected:
<style type="text/css">
label.active {
background-color: #aa2233;
}
</style>
<label class="inputOption active" for="1"><input type="radio" name="radio1" id="1" /><span class="aText">Option 1</span></label>
See here.
my html:
<input type="text" value="" id="email1" class="inputfield_ui" />
<label>Email address 1</label>
my inputfield css:
width:95%;
z-index:3;
my label css:
position:absolute;
display:block;
top:8px;
left:11px;
color:#CCCCCC;
z-index:1;
when i try to click on the label to enter something it wont allow me to do this... instead will show a default cursor and i will have to click next to the other space of the textfield to write something...
z-indexes are correct , arent they?
EDIT: SOLUTION
html:
<input type="text" value="" id="email1" class="input" />
<label>Email address 1</label>
<span class="input_bg"></span>
css:
input{
background:transparent;
z-index:1;
}
label{
z-index:2;
}
.input_bg{
/*input css with background*/
z-index:3;
}
I'm assuming this is for the purpose of a textbox watermark?
If this is the case, then I would use CSS to hide the label (don't remove it for accessibility purposes):
label
{
display:none;
}
Then use a javascript tool to display the watermarked text. There are a lot of good jQuery solutions for this:
http://code.google.com/p/jquery-watermark/
It's then a case of applying something like:
$("#email1").watermark("Email address 1");
However, this can be improved, so that you don't have to apply this for every single element by doing something like:
$(".watermark").watermark($(this).attr("title"));
Alternatively, if all your input's have associated labels, you can apply them like this:
$(".watermark").watermark($("label[for='" + $(this).attr("id") + "']").html());
This way if the user doesn't have javascript enabled, theres still the title to rely on, and if they don't have CSS, then the label will be shown.
z-index doesn't work without positioning. Try to add position:relative; to the input input CSS.
html:
<input type="text" value="" id="email1" class="input" />
<label>Email address 1</label>
<span class="input_bg"></span>
css:
input{
background:transparent;
z-index:1;
}
label{
z-index:2;
}
.input_bg{
/*input css with background*/
z-index:3;
}
<input type="file" value="Browse" name="avatar" id="id_avatar" />
I tried to modify the value, but it's not working. How to customize the button text?
Use Bootstrap FileStyle, which is used to style the file fields of forms. It is a plugin for a jQuery-based component library called Twitter Bootstrap
Sample usage:
Include:
<script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script>
Via JavaScript:
$(":file").filestyle();
Via data attributes:
<input type="file" class="filestyle" data-classButton="btn btn-primary" data-input="false" data-classIcon="icon-plus" data-buttonText="Your label here.">
Hide the file input. Create a new input to capture a click event and forward it to the hidden input:
<input type="button" id="loadFileXml" value="loadXml" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>
You can put an image instead, and do it like this:
HTML:
<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1" name="file1" style="display:none" />
JQuery:
$("#upfile1").click(function () {
$("#file1").trigger('click');
});
CAVEAT:
In IE9 and IE10 if you trigger the onClick in a file input via javascript, the form will be flagged as 'dangerous' and cannot be submitted with javascript, not sure if it can be submitted traditionally.
The "upload file..." text is pre-defined by the browser and can't be changed.
The only way to get around this is to use a Flash- or Java-based upload component like swfupload.
Works Perfectly on All Browsers Hope it will work for you too.
HTML:
<input type="file" class="custom-file-input">
CSS:
.custom-file-input::-webkit-file-upload-button {
visibility: hidden;
}
.custom-file-input::before {
content: 'Select some files';
display: inline-block;
background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
border: 1px solid #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
text-shadow: 1px 1px #fff;
font-weight: 700;
font-size: 10pt;
}
.custom-file-input:hover::before {
border-color: black;
}
.custom-file-input:active::before {
background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}
Change content: 'Select some files'; with the text you want within ''
IF NOT WORKING WITH firefox then use this instead of input:
<label class="custom-file-input" for="Upload" >
</label>
<input id="Upload" type="file" multiple="multiple" name="_photos" accept="image/*" style="visibility: hidden">
Simply
<label class="btn btn-primary">
<i class="fa fa-image"></i> Your text here<input type="file" style="display: none;" name="image">
</label>
[Edit with snippet]
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<label class="btn btn-primary">
<i class="fa fa-image"></i> Your text here<input type="file" style="display: none;" name="image">
</label>
I think this is what you want:
<button style="display:block;width:120px; height:30px;" onclick="document.getElementById('getFile').click()">Your text here</button>
<input type='file' id="getFile" style="display:none">
This is a JQuery plugin to change the button text of an input file element.
Example HTML:
<input type="file" id="choose-file" />
Example JS:
$('#choose-file').inputFileText({
text: 'Select File'
});
Result:
<input id="uploadFile" placeholder="Choose File" disabled="disabled" />
<div class="fileUpload btn btn-primary">
<span>Your name</span>
<input id="uploadBtn" type="file" class="upload" />
</div>
JS
document.getElementById("uploadBtn").onchange = function () {
document.getElementById("uploadFile").value = this.value;
};
more http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/
Use <label> for the caption
<form enctype='multipart/form-data' action='/uploads.php' method=post>
<label for=b1>
<u>Your</u> caption here
<input style='width:0px' type=file name=upfile id=b1
onchange='optionalExtraProcessing(b1.files[0])'
accept='image/png'>
</label>
</form>
This works without any javascript. You can decorate the label to any degree of complexity, to your heart's content. When you click on the label, the click automatically gets redirected to the file input. The file input itself can be made invisible by any method. If you want the label to appear like a button, there are many solutions, e.g.:
label u {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
color: initial;
}
I know, nobody asked for it but if anybody is using bootstrap, it can be changed through Label and CSS Pseudo-selector.
For changing button text:
.custom-file-label::after {
content: "What's up?";
}
For changing field text:
<label class="custom-file-label" for="upload">Drop it like it's hot</label>
Here's a fiddle.
In Addition to MushyPeas answer, you can add a label to show the filename like so (no jQuery needed):
Credits also to this answer.
<input type="button" id="click-input" value="Write anything" onclick="document.getElementById('file').click();" />
<label for="click-input" id="file-name">Bla bla</label>
<input type="file" style="display:none;" id="file">
<script>
inputElement = document.getElementById('file')
labelElement = document.getElementById('file-name')
inputElement.onchange = function(event) {
var path = inputElement.value;
if (path) {
labelElement.innerHTML = path.split(/(\\|\/)/g).pop()
} else {
labelElement.innerHTML = 'Bla bla'
}
}
</script>
Only CSS & bootstrap class
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="col-md-4 input-group">
<input class="form-control" type="text" />
<div class="input-group-btn">
<label for="files" class="btn btn-default">browse</label>
<input id="files" type="file" class="btn btn-default" style="visibility:hidden;" />
</div>
</div>
EDIT: I see now by the comments that you are asking about the button text, and not the file path. My bad. I'll leave my original answer below in case someone else who stumbles upon this question interprets it the way I originally did.
2nd EDIT: I had deleted this answer because I decided that I misunderstood the question and my answer was not relevant. However, comments in another answer indicated that people still wanted to see this answer so I'm undeleting it.
MY ORIGINAL ANSWER (I thought the OP was asking about the path, not the button text):
This is not a supported feature for security reasons. The Opera web browser used to support this but it was removed. Think about what would be possible if this were supported; You could make a page with a file upload input, pre-populate it with a path to some sensitive file and then auto-submit the form using javascript triggered by the onload event. This would happen too fast for the user to do anything about it.
In Bootstrap +4.5 you can simply add this to your code:
.custom-file-input~.custom-file-label::after {
content: "Your custom text ...";
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="custom-file">
<input type="file" class="custom-file-input">
<label class="custom-file-label">Your custom placeholder ...</label>
</div>
What about icons without using real images and "interactivity"?
Check the following example that doesn't use any image, not even javascript, and also it is interactive in the sense that changes its look on mouse events as on mouse-over and on mouse left or right click.
input
{
padding: 10px;
width: 100%;
}
input::file-selector-button
{
display: none;
}
input::before
{
border: 1px solid red;
border-radius: 3px 8px 3px 8px;
color: red;
content: attr(value)' Some more text';
margin: 25px;
padding: 5px;
}
input:hover:before
{
border: 1px groove blue;
background: lime;
}
input:active:before
{
border: 1px groove blue;
background: yellow;
}
<input type="file" value="📂 Open..." />
How it works:
Basically, it hides the main button of the standard file input element and shows its pseudo element, indicated by the :before part. Than it styles how it looks like and also some mouse events, so it is kind of "interactive".
Also using the :file-selector-button pseudo-element, allows to style the button it self or even to not display it at all as I have done int the above example with the code display: none;. This allows to use the :before element as replacement of the button.
The advantage of doing it with css is that by not using any javascript it will work even if the user's browser has javascript disabled.
About the folder icon:
Actually it is a char it self in UNICODE: 📂 that is U+1F4C2 code-point. To see it correctly the user of the page must have a font that supports it. I did not install any new font into my system (Win7) and I see it correctly: so I suppose it is correctly seen by everyone else.
Here is a way to "change" the text of an input with file type, with pure HTML and javascript:
<input id='browse' type='file' style='width:0px'>
<button id='browser' onclick='browse.click()'>
*The text you want*
</button>
Before that <input type="file">, add an image and <input style="position:absolute"> it will occupy the space of <input type="file">
Use the following CSS to the file element
position:relative;
opacity:0;
z-index:99;
You can simply add some css trick. you don't need javascript or more input files and i keep existing value attribute. you need to add only css. you can try this solution.
.btn-file-upload{
width: 187px;
position:relative;
}
.btn-file-upload:after{
content: attr(value);
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 48%;
background: #795548;
color: white;
border-radius: 2px;
text-align: center;
font-size: 12px;
line-height: 2;
}
<input type="file" class="btn-file-upload" value="Uploadfile" />
for me it does not work the custom text with bootstrap-filestyle. It help with button decoration but text its weird to be changed, before get into wrestling with css i try the following :
$( document ).ready(function() {
$('.buttonText').html('Seleccione ficheros');
});
bootstrap-filestyle render the component as span with a class named butonText, so when document load just change the text. easy right and it must work on all browsers.
cheers
if you using rails and have problem apply it, I would like to add some tips from original answer posted by #Fernando Kosh
Download file zip and copy file bootstrap-filestyle.min.js ke folder app/assets/javascripts/
open your application.js and add this line below
//= require bootstrap-filestyle.min
open your coffee and add this line
$(":file").filestyle({buttonName: "btn-primary",buttonBefore: true,buttonText: " Your text here",icon: false});
I did it like this for my project:
.btn-outlined.btn-primary {
color: #000;
}
.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
color:#000;
}
.btn-block {
display: block;
width: 100%;
padding: 15px 0;
margin-bottom: 10px;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
<label for="fileUpload" class="btn btn-primary btn-block btn-outlined">Your text</label>
<input type="file" id="fileUpload"style="display: none;">
This is an alternative solution that may be of help to you. This hides the text that appears out of the button, mixing it with the background-color of the div. Then you can give the div a title you like.
<div style="padding:10px;font-weight:bolder; background-color:#446655;color: white;margin-top:10px;width:112px;overflow: hidden;">
UPLOAD IMAGE <input style="width:100px;color:#446655;display: inline;" type="file" />
</div>