Hi I just want to ask what's wrong with my program. Im doing this program where I have to choose a file. But the button is an image and I would like to add a tooltip that this image is for selecting a file. This block of codes is perfectly working in chrome. But when I run it in IE11 the title "Select File"is not showing in IE11. I didn't know that IE has a lot of restriction. Unlike in chrome.
.image-upload>input {
visibility: hidden;
width: 0px;
height: 0px;
margin: -10%;
}
div.item {
vertical-align: top;
display: inline-block;
text-align: center;
width: 250px;
img {
width: 90px;
height: 50px;
}
.caption {
display: block;
color: white;
}
div.space {
margin-top: -15px;
}
<div class="image-upload">
<label for="file-input">
<p align="left"><font face="Arial" color="black" size = "5"><b>   Select File    </b><span style="cursor:pointer" alt="Select File" title="Select File">
<img src="http://icons.veryicon.com/ico/Folder/Black%20glamour/Files.ico" style="pointer-events: none" id="img" title="Select File"/></span></font></p></label>
</label>
<input id="file-input" type="file" name="file" onchange="onFileSelected(event)" onclick=getName() required>
</div>
You need to remove the inline style of pointer-events:none from the image tag if you want to be able to hover it.
By setting it to none, it means your mouse can't interact with the element and therefore it cannot hover it to show the title.
Try this:
<img src="http://icons.veryicon.com/ico/Folder/Black%20glamour/Files.ico" id="img" title="Select File"/>
Example fiddle showing with and without pointer events
More information about pointer events
Also please note the following errors with your code:
the font tag is obsolete and should not be used - use css instead
  should have a semi colon after it:
there is an extra end label and I don't think you are allowed p tags inside - use a validator to check your code
<div class="image-upload">
<p align="left"><label for="file-input"><b> Select File </b>
</label></p>
<span style="cursor:pointer; display:inline-block;" alt="Select File" title="Select File"><label for="file-input"><img src="http://icons.veryicon.com/ico/Folder/Black%20glamour/Files.ico" id="img" title="Select File"/>
</label></span>
<input id="file-input" type="file" name="file" onchange="onFileSelected(event)" onclick=getName() required>
</div>
you could add another span ( for example ), give it position absolute, and on hover on the image, show it .
you can also you javascript ( jquery ) to show it in the same position your cursor is, but that's a bit more complicated.
See below if this is what you want
.title {
transition: 0.3s ease-out;
opacity: 0;
position: absolute;
top: 50%;
left: 0%;
transform: translateY(-50%);
font-size: 15px;
background: #fff;
}
.wrapper {
display: inline-block;
position: relative;
}
.wrapper:hover .title {
opacity: 1;
}
<div class="image-upload">
<label for="file-input">
<p align="left"><font face="Arial" color="black" size="5"><b>   Select File    </b> <span class="wrapper" style="cursor:pointer" alt="Select File" title="Select File">
<span class="title">Select File</span>
<img src="http://icons.veryicon.com/ico/Folder/Black%20glamour/Files.ico" style="pointer-events: none" id="img" title="Select File"/></span></font></p>
</label>
</label>
<input id="file-input" type="file" name="file" onchange="onFileSelected(event)" onclick=getName() required>
</div>
Related
Heres my code :
<input id="homebutton" type="image" style="display:inline" src="home.png" name="saveform" class="btTxt submit ml-3" onclick="location.href='home.html'"/>
<h5 id="theatrename" style="display:inline" class="text-center mt-5">name</h5>
So I managed to place the 'homebutton' and the 'name' on the same line, but I want the 'homebutton' to be placed at the left while the 'name' to be placed on the text-center.
I've already tried class="text-center" as like in the code above but it doesn't seem to work :/
How can I solve this?
to force align an element an option would be float property.
See this example bellow.
next option would be absolutely positioned. but be careful to padding in absolute position element to be sure it does not overlay the input.
div {
position: relative;
height: 25px;
}
#homebutton {
display: inline;
float: left;
width: 25px
}
#theatrename {
padding: 0 25px;
position: absolute;
text-align: center;
left: 0;
right: 0;
display: inline;
margin: auto;
}
<div>
<input id="homebutton" type="image" src="https://image.flaticon.com/icons/png/512/69/69524.png" name="saveform" class="btTxt submit ml-3" onclick="location.href='home.html'" />
<h5 id="theatrename" class="text-center mt-5">name</h5>
</div>
I want to hide the browse button for users to upload a file. How do I do it?
.fa-cloud-upload {
position: absolute;
top: 5%;
}
<label class="file_upload">
<input type="file" name="uploads" accept="image/*, video/*"/><i class="fa fa-cloud-upload" aria-hidden="true" style="font-size: 85px;"></i>
</label>
You can just hide the input and use label to open the file see the example bellow:
<label for="myInputFile">
<img src="https://cdn1.iconfinder.com/data/icons/hawcons/32/699329-icon-57-document-download-128.png">
<input type="file" name="myInputFile" id="myInputFile" style="display:none;" />
</label>
You can just hide the input and trigger it when user clicks the icon:
Click the image to select file
<br>
<img src="http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-9/256/open-file-icon.png" width="50" height="50" onclick="document.getElementById('mycustomid').click();" style="cursor: pointer;">
<input type="file" id="mycustomid" style="visibility: hidden;" />
Simpy add display: none; to hide the input element.
input {
display: none;
}
Just hide your file input field.
label input[ type="file" ] {
display: none;
}
<label>
<input type="file" />
<span>Icon</span>
</label>
Hide the input with display:none
.fa-cloud-upload {
position: absolute;
top: 5%;
}
.file_upload input[type="file"]{display:none}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<label class="file_upload">
<input type="file" name="uploads" accept="image/*, video/*"/>
<i class="fa fa-cloud-upload" aria-hidden="true" style="font-size: 25px;"></i>
</label>
You can do something like this. Your Font-Awesome icon should appears where you try it in your environnement. :
.file_upload {
position: relative;
overflow: hidden;
display: inline-block;
}
.btn {
border: 0px solid gray;
color: blue;
background-color: white;
padding: 8px 20px;
border-radius: 8px;
font-size: 20px;
font-weight: bold;
}
.file_upload input[type=file] {
font-size: 100px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
<div class="file_upload">
<button class="btn"><i class="fa fa-cloud-upload" aria-hidden="true" style="font-size: 15px;">X</i></button>
<input type="file" name="uploads" accept="image/*, video/*"/>
</div>
.fa-cloud-upload {
position: absolute;
top: 5%;
}
<label class="file_upload">
<input type="file" name="uploads" accept="image/*, video/*"/><i class="fa fa-cloud-upload" aria-hidden="true" style="font-size: 85px;"></i>
</label>
I am trying to simulate the behavior of a radio button but using, instead of and input tag, an span, in order to be easier to style with css. I can simulate the change of state, but I cannot figure out how to only let one button to be selected.
Here is my js for the 'change of state':
function CheckRadioButton() {
$(".radio-button").click(function () {
if ($(this).hasClass('checked')) {
$(this).removeClass('checked');
} else {
$(this).addClass('checked');
}
});
}
What I'd like to do is, if one button changes its class to selected, all the rest have to be 'unselected'.
Another problem I encounter is that I have several "categories" in which I use this type of buttons and I only want the only option inside of each category. For example:
<p class="fake-label">Skirt</p>
<div class="radio-button-wrapper">
<span class="radio-button"></span>
<span>Yes</span>
</div>
<div class="radio-button-wrapper">
<span class="radio-button"></span>
<span>No</span>
</div>
<p class="fake-label">Season</p>
<div class="radio-button-wrapper">
<span class="radio-button"></span>
<span>Summer</span>
</div>
<div class="radio-button-wrapper">
<span class="radio-button"></span>
<span>Winter</span>
</div>
How can I do to be able to 'choose' only one between yes/no and only one between 'summer/winter', but both at the same time?? (only two of this for spans can have class 'checked' at the same time)
Thank you :)
Try this
FIDDLE
Yo can add an additional div to group similar categories and update your jquery code like below.
HTML
<p class="fake-label">Skirt</p>
<div class="radio-group">
<div class="radio-button-wrapper">
<span class="radio-button"></span>
<span>Yes</span>
</div>
<div class="radio-button-wrapper">
<span class="radio-button"></span>
<span>No</span>
</div>
</div>
<p class="fake-label">Season</p>
<div class="radio-group">
<div class="radio-button-wrapper">
<span class="radio-button"></span>
<span>Summer</span>
</div>
<div class="radio-button-wrapper">
<span class="radio-button"></span>
<span>Winter</span>
</div>
</div>
Javascript
$(".radio-button").click(function () {
$(this).closest('div.radio-group').find(".radio-button").removeClass('checked');
$(this).addClass('checked');
});
You can combine the power of real inputs with the freedom of using other tags:
.input-wrap {
position: relative;
}
input[type="radio"] {
display: none;
}
input[type="radio"] + label {
padding-left: 22px;
}
input[type="radio"] + label:before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 10px;
height: 10px;
border: 2px solid black;
border-radius: 50%;
transform: translateY(-50%);
}
input[type="radio"]:checked + label:after {
content: "";
position: absolute;
left:3px;
top: 50%;
width: 8px;
height: 8px;
background-color: #bada55;
border-radius: 50%;
transform: translateY(-50%);
}
<div class="input-wrap">
<input type="radio" name="test" id="option1" checked><label for="option1">Option1</label>
</div>
<div class="input-wrap">
<input type="radio" name="test" id="option2"><label for="option2">Option1</label>
</div>
<div class="input-wrap">
<input type="radio" name="test" id="option3"><label for="option3">Option1</label>
</div>
It's kind like adding/removing classes like you did in your example, but instead we use the :checked + label selector to select the label of the currently checked input, that way we have the accessibility of real inputs (almost) and the freedom of writing our markup the way we want it to be.
And the best thing is this solution is css only and it can be used to hide/show entire sections of a page.
PS: I said "almost" the same accessibility because I think some screen readers will ignore inputs with display: none, to fix this you can still use:
position: absolute;
left: -99999px;
EDIT: Since it seams you really want to go down this fake-inputs, this should help:
$(".radio-button").click(function () {
$(".radio-button").removeClass('checked);
$(this).addClass('checked');
});
I created a button to upload a file with an icon in order to mask the input text box and have just one button. The problem is that my button takes all the width of the div. I would like the two button are side by side. But, when I modify the .btn-file, the select dialog is broken and so, It doesn't appears.
This is the div :
<div id="mydiv">
A text <br>
An other text
<form id="test">
<span class="btn btn-block btn-file">
<i class="glyphicon glyphicon-export"></i>
<input type="file" name="file" id="exampleInputFile" file-model="customer.file" on-file-change="Submit">
</span>
</form>
<span class="glyphicon glyphicon-envelope"></span>
</div>
This it the CSS :
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
font-size: 100px;
text-align: left;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
cursor: inherit;
display: block;
}
Can you help me to align the two buttons and reduce the size of the upload button ? Thanks.
You just need to make inline to the span that contains file upload button.
I modified your demo here - https://plnkr.co/edit/cYpho3SPeRV4NqqGOuHw?p=preview
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
font-size: 100px;
text-align: left;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
cursor: inherit;
display: block;
}
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div id="mydiv">
A text <br>
An other text
<form id="test">
<span class="btn btn-block btn-file" style="display:inline">
<i class="glyphicon glyphicon-export"></i>
<input type="file" name="file" id="exampleInputFile" file-model="customer.file" on-file-change="Submit">
</span>
<span class="glyphicon glyphicon-envelope"></span>
</form>
</div>
</body>
</html>
You've got the class btn-block on the outer span -- which is making it display in block mode, hence why it's taking up all the width available. Remove that class if you don't want this behaviour.
What I'm trying to do is place a static piece of text at the end of a input field. Not a placeholder, the idea is to have something like "#gmail.com" at the end of an input element field using HTML and CSS. My question is how could this be accomplished? I got the idea from the bootstrap validation states icons.
For example the input field would look like..
I hope this makes sense.. If you have any questions feel free to ask.
This text should stay static as the user types, which is what seperates it from a input field.
Here's some code that I have:
<form id="loginForm">
<fieldset>
<legend>Login</legend>
<div class="form-group">
<input id="usernameField" class="loginField form-control" name="username" type="text" placeholder="john.doe" required>
</div>
<br>
<div class="form-group">
<input id="passwordField" class="loginField form-control" name="password" type="password" placeholder="password" required>
</div>
<br>
<span class="visible-lg">
<button class="btn btn-danger loginBtn"><i class="fa fa-signin"></i> Login <i class="fa fa-spinner icon-spin icon-white loginSpinner"></i></button>
</span>
<span class="hidden-lg">
<button class="btn btn-danger loginBtn btn-large"><i class="fa fa-signin"></i> Login <i class="fa fa-spinner icon-spin icon-white loginSpinner"></i></button>
</span>
<br>
</fieldset>
</form>
My css:
.loginSpinner{
display: none !important;
}
#badLogin{
display: none;
}
#badRequest{
display: none;
}
#createAccountForm{
display: none;
}
.createSpinner{
display: none !important;
}
#forgotPassword{
display: none;
color: red;
}
#usernameField:before{
content:"#gmail.com";
background-color:yellow;
color:red;
font-weight:bold;
}
JSFiddle: http://jsfiddle.net/UMBRd/
Here's some stuff to get you going, essentially you'll need to wrap the input in a div and adjust it's width to be the same as the input's (I did this by floating the div, but there are other ways). This will give you a coordinate system to place a pseudo-element in with your desired text.
HTML
<div class="input-container">
<input type="text"/>
</div>
CSS
.input-container {
position: relative;
float: left;
}
.input-container:after {
position: absolute;
right: 0;
top: 0;
content: '#gmail.com';
}
See this fiddle.
Note, the pure CSS way with pseudo-elements won't work as discussed in this post.
The only thing I can think of would be to use absolute and relative positioning to overlay the input on top of the span. It's not perfect and I had to play around with the line-height a bit, but this might be enough to get you started:
HTML
<div>
<span>#gmail.com</span>
<input type="text" />
</div>
CSS
div {
position: relative;
}
span {
display: inline-block;
width: 200px;
position: relative;
line-height:95px;
text-align:right;
}
input {
position: absolute;
left: 10px;
top: 35px;
background-color: transparent;
width:200px;
height: 20px;
}
http://jsfiddle.net/pemep/