Placing static text at the end of an input field using HTML - javascript

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/

Related

css show validation message above the input field

Given that I have the following html bit:
form p label {
display: block;
float: left;
font-size: 14px;
color: green;
}
#myField.error {
content: 'validation error occurred';
display: block;
}
<form>
<div id="myField">
<p class="required">
<label for="username">Username:</label>
<input type="text" name="username" id="username" class="error" maxlength="10" value="" title="Username" required />
</p>
</div>
</form>
how can I show the validation error message above the input field, floating to the right? I don't want to modify the html code manually. However, adding some span tag using jquery or js is fine. All said, a css solution is preferred.
I made small change to your html, moved the error class from input to p element. And in css used ::before CSS pseudo element (and took the liberty to add a red border for input & red color for error message)
form p label {
display: block;
float: left;
font-size: 14px;
color: green;
}
#myField .error::before {
content: 'validation error occurred';
position: absolute;
top: -4px;
color: red;
}
#myField .error input {
border-color: red;
}
<form>
<div id="myField">
<p class="required error">
<label for="username">Username:</label>
<input type="text" name="username" id="username" class="" maxlength="10" value="" title="Username" required />
</p>
</div>
</form>
JS Fiddle link for this code

Fake radio button 1 option only

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');
});

Title attribute not working in IE11

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>&nbsp&nbsp&nbspSelect File&nbsp&nbsp&nbsp </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
&nbsp 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>&nbsp&nbsp&nbspSelect File&nbsp&nbsp&nbsp </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>

Reduce upload button size in CSS

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.

display inline block not making divs horizontals

how to make two divs horizontal
I gave display: inline-block but not successful
providing my code below
an yo tell me how to fix it
http://codepen.io/anon/pen/vGezoo
<div class ="name-list" >
<input type="button" value="+New"><br>
<div class='gettingValues' style='border:1px solid #000;'> getting form values
<input data-name="edit" type="button" value="Edit" name="editHistory">
<input data-name="delete" type="button" name="deleteHistory" value="Delete">
</div>
</div>
<div class ="contact-details">
<p>ADD OR EDIT CONTACT (FULL NAME)</p>
<form id="localStorageTest" method="post" action="">
<label>Name:</label>
<input type="text" name="name" id="name" class="stored" value="" /><br>
<label>Email:</label>
<input type="email" name="email" id="email" class="stored" value="" /><br>
<label>Message:</label>
<textarea name="message" id="message" class="stored"></textarea><br>
<input type="submit" class="demo-button" value="Submit" />
<button type="reset" value="cancel">Cancel</button>
</form>
</div>
The following style allows to display divs side by side in all browsers:
display: table-cell;
"display: inline-block" have margin-right: 4px. You should css margin-right: -4px
.name-list {
width: 30%;
border: 1px solid green;
display: inline-block;
margin-right: -4px;
}
.contact-details {
width: 70%;
border: 1px solid red;
display: inline-block;
margin-right: -4px;
}
Two issues prevent your inline-block divs from sitting side by side.
Borders
Borders add to the size of your element by default! (GOTHCA!) so in reality your elements are (70% + 2px + 30% + 2px) or (100% + 4px) of your total space! Naturally that won't fit on one line.
This can be fixed by using css box-sizing!
box-sizing: border-box;
or the calc function!
calc(70% - 2px) and calc(30% - 2px)
Text Gaps
The second issue is that inline elements can have gaps between them, because inline-block is modeled after text, gaps between the elements in the html create a gap between elements on the page.
This can be fixed by setting the font-size!
font-size: 0px;
But don't forget to set it back after!
font-size: initial;
Or you can remove the line break between your elements!
<div>
</div><div>
</div>

Categories