I'm using and html input and I'm trying to simulate a verification code. So far I only have the input which can only contain numbers. For some reason the input on my phone still appears to offer letters. Is there a way to make it so mobile phones have a number keypad instead of just a regular keyboard? This is the look I want:
It can be different as long as the user only has the numbers option. Here is the code I have so far:
<div id="my-input">
<input type="text" numbers-only maxlength="5"
>
</div>
<style>
#my-input {
display: inline-block;
padding-bottom: 2px;
background-image: linear-gradient(to right, tomato 60%, transparent 0%);
background-position: bottom;
background-size: 34.5px 5px;
background-repeat: repeat-x;
overflow: hidden;
}
#my-input input {
border-bottom: 0;
border: none;
outline: none;
letter-spacing: 28.5px;
overflow-x: hidden;
width: 175px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('input[numbers-only]').forEach(function (input) {
input.addEventListener('input', function () {
input.value = input.value.replace(/[^.\d]+/g, '').replace(/^([^.]*\.)|\./g, '$1');
});
});
});
</script>
In HTML, input has attribute. You can use inputmode.
<input type="text" inputmode="numeric" />
For more details you can visit website
Or you can use pattern
<input type="text" pattern="\d*">
More Details
Related
Into input placeholder, I'm trying to set placeholder-name with black color & Star with red color as a Required filed but didn't apply an only specific red color to Star, so is there any another way to set color Please suggest me best way?
Already tried to set using but didn't get proper resolution,
::-WebKit-input-placeholder:after {
content: "*";
color: red;
}
Demo Mentioned below:
It will work for you. I have just codded for single field.
.form-group{position:relative;}
.form-group input{position:relative;z-index:9;background:transparent;border:1px solid #aaa;padding: 5px}
.form-group label{position:absolute;left:5px;top:5px;z-index:1;color:#ccc;}
.form-group label::after{content:"*";color:red;}
input[required]:valid + label{display: none;}
<div class="form-group">
<input type="text" name="name" required="required" />
<label>Enter first name</label>
</div>
There is no perfect solution.
The first option is to use background images, but the star position must be set manually for every field:
input::placeholder {
background-image: url('images/some-red-star.png') no-repeat;
background-position-x: 50px;
}
If you can't afford to place manually every star you use a fake html placeholder by placing a div bellow every and making it behave as a placeholder:
<input required="required">
<div class="placeholder">name<span>*</span>
.placeholder {
position: ...
pointer-events: none;
user-select: none;
}
.placeholder > span { color: red; }
input:valid ~ .placeholder {
display: none;
}
Try This I think it's useful for you
input {
width: 200px;
padding: 8px;
}
input[required] + label {
position: relative;
color: #000;
font-size: 16px;
left: -210px;
}
input[required] + label:after {
content: '*';
color: red;
}
.btn {
width: auto;
margin: 10px 0;
}
<form>
<input type="text" id="box1" required="required" />
<label for="name">Enter First Name</label><br/><br/>
<input type="text" id="box1" required="required" />
<label for="name">Enter Last Name</label><br/>
<input class="btn" type="submit" />
</form>
I've been doing a huge amount of reading here and on other websites about how to dynamically increase an input field's width based on its content. All the solutions so far have only worked in part, but I have found a website where it works perfectly:
https://paper.fiftythree.com/search
They've even given some vague instruction as to how they did it:
http://making.fiftythree.com/fluid-text-inputs/
But I can't for the life of me work out how to implement this on my own website.
This is my form structure at the moment:
<form action="/" class="search-form">
<input type="text" name="s" class="_input" placeholder="What are you looking for?">
<button type="submit" class="_button">Search</button>
</form>
My reason for trying to do this is that the form as a whole has a border underneath it. I would then like text that is typed in to have its own border-bottom 'grow' with the text in a different colour. The input field being a smaller width with its own border works, but I am stuck on a smooth dynamic experience for its width.
Could anyone help? Thanks.
On this example we can do this:
Input positioned absolute with fixed width this never changes, and will get the data
An element that will change the width based on the value from the input and the text transparent so that way we only see the input text.
Centered elements creating the ilusion of increase of the width
$('input').on('keypress', function() {
$('span').text($(this).val())
})
.container {
text-align: center;
position: relative;
font-size:25px;
}
.container img, .container span {
display: inline-block;
line-height: 50px;
margin-right: -4px;
vertical-align: middle;
}
.container span {
padding: 0 10px;
font-family: sans-serif;
color: transparent;
overflow: hidden;
white-space: nowrap;
max-width: 250px;
}
.container input {
width: 250px;
border: none;
text-align: center;
font-size:inherit;
padding: 0 50px;
position: absolute;
left: 50%;
top: 50%;
z-index: 5;
background: transparent;
transform: translate(-50%, -50%)
}
input:focus {
outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<img src="http://placekitten.com/50" alt="">
<span>Type here</span>
<input type="text" placeholder="Type here">
<img src="http://placekitten.com/50" alt="">
</div>
Note: Still have some issues when deleting text, but you get the idea
Context:
I'm styling a check-box using sprite-sheet and jQuery.
I want the "focus" state to behave exactly like the checkboxes featured on this free HTML5 template:
By "focus"/"blur", I'm referring to the colored border around the checkbox that:
...appears on tab into checkbox, click on checkbox or click on label.
...disappears on tab out of checkbox, click out of checkbox or click off of label.
My Code:
Thus far, I've only achieved the described "focus"/"blur" on tabbing in/out of the checkbox.
As JSFiddle:
http://jsfiddle.net/k9mgh8rz/4/
As HTML Page:
(CDN scripts wouldn't load when posting as Stack Overflow snippet).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
input[type="text"],
input[type="password"] {
border: 1px solid black;
padding: 5px;
}
input[type="text"]:focus,
input[type="password"]:focus {
border: 1px solid red;
}
label {
cursor: pointer;
}
.forgetmenot span {
display: inline-block;
margin-left: 15px;
position: relative;
top: 3px;
}
/* iCheck Plugin (Skin for check-box)
----------------------------------- */
.icheckbox_minimal {
display: inline-block;
*display: inline;
vertical-align: middle;
margin: 0;
padding: 0;
width: 30px;
height: 30px;
background: url(http://s10.postimg.org/lzj62spk5/check_boxes.png) no-repeat;
border: none;
cursor: pointer;
}
.icheckbox_minimal {
background-position: 0 0;
}
.icheckbox_minimal.checked {
background-position: -60px 0;
}
.icheckbox_minimal.focus {
background-position: -30px 0;
}
.icheckbox_minimal.checked.focus {
background-position: -90px 0;
}
/* HiDPI support */
#media (-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi),
(min-resolution: 1.25dppx) {
.icheckbox_minimal {
background-image: url(http://s16.postimg.org/k51empanp/check_boxes_2x.png);
-webkit-background-size: 200px 20px;
background-size: 200px 20px;
}
}
</style>
</head>
<body>
<!--Mark-up cannot be edited for the purposes of the required solution.-->
<p>
<label for="user_login">Username<br>
<input class="input" id="user_login" name="log" size="20" type="text" value="">
</label>
</p>
<p>
<label for="user_pass">Password<br>
<input class="input" id="user_pass" name="pwd" size="20" type="password" value="">
</label>
</p>
<p class="forgetmenot">
<label for="rememberme">
<input id="rememberme" name="rememberme" type="checkbox" value="forever"> Remember Me
</label>
</p>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.1/icheck.js"></script>
<script>
$(document).ready(function() {
//Add span for styling.
$('#rememberme').each(function() {
$(this.nextSibling).wrap('<span><\/span>');
});
//Apply iCheck
$('input').iCheck({
checkboxClass: 'icheckbox_minimal'
});
});
</script>
</body>
</html>
My question:
Using the above JSFiddle, modifying only jQuery and CSS (but not the mark-up), how can I achieve the described "focus"/"blur" for click in/out of checkbox and click on/off of label?
something like:
$('input').on('click change', function()
{
$('input').css('border-color', 'black'); // reset all inputs to black
$(this).css('border-color', 'red'); // define the current one as red
});
<div id="inputs">
<input type="text" value="">
<input type="text" value="">
</div>
<input type="button" id="add" value="Add input">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$('#add').click(function(){
$('#inputs').append('<input type="text" value="">');
});
});
</script>
Within the code above, i want to add a search icon for every new input generated with a button (id=add ; not shown here for simplicity). This would be a typical input:
<label>
<input type="text" class="search" name="word" autofocus="autofocus" />
<span class="search-icon">
<span class="glass"></span>
<span class="handle"></span>
</span>
</label>
With CSS i could position the search icons in a fixed way.
Thanks
Here's the CSS code that I'd use:
#add {
padding: 17px;
padding-left: 55px;
width: 300px;
border: 1px solid #f5f5f5;
font-size: 13px;
color: gray;
background-image: url('http://i47.tinypic.com/r02vbq.png');
background-repeat: no-repeat;
background-position: left center;
outline: 0;
}
Note: I added a lot of extra codes to make the search box look better, the necessary code to make the search box apear is padding-left, background-image:url, background-repeat and background-position. Replace "http://i47.tinypic.com/r02vbq.png" with whatever search icon you want.
It's also important to know that now in HTML5, most browsers render
<input type="search" results>
with a search icon. The input type search makes it a search box, with a "x" button to clear, and adding "results" also displays a search box. Of course you could also add an x button with CSS and JavaScript to a regular search box. It's also important to note that input type search allows very little styling. Demo on Safari on a Mac:
Tell me if this helps you, and make sure to mark as the answer. :)
Put the image into the span, for example using background-image, then give it a relative position and move it to the left so it overlaps the right end of the search box, for example:
#g-search-button {
display: inline-block;
width: 16px;
height: 16px;
position: relative;
left: -22px;
top: 3px;
background-color: black; /* Replace with your own image */
}
Working example on JSBin
Note: This is not my answer, i've found it here
There's a step by step on kirupa.com here: http://www.kirupa.com/html5/creating_an_awesome_search_box.htm
With relevant bit of CSS for you here:
input[type=text] {
width: 260px;
padding: 5px;
padding-right: 40px;
outline: none;
border: 2px solid #999999;
border-radius: 5px;
background-color: #FBFBFB;
font-family: Cambria, Cochin, Georgia, serif;
font-size: 16px;
background-position: 270px -10px;
background-image: url('http://www.kirupa.com/images/search.png');
background-repeat: no-repeat;
}
I have am using an image button instead of text for a submit button here and I have used text-indent -9999px to "hide" the text value. However, in IE7 that text is still showing over the button.
I tried making the text transparent but that didn't help.
Is there something I am missing here?
HTML:
<form action="news.php" method="post">
<fieldset>
<input type="text" id="your-email" name="your-email" value="YOUR EMAIL ADDRESS" onfocus="if (this.value=='YOUR EMAIL ADDRESS') this.value='';" />
<input type="submit" value="::Submit Query::" id="red-submit" />
</fieldset>
</form>
Here is the CSS:
input#red-submit {
width: 90px;
height: 30px;
border-style: none;
text-indent: -9999px;
position: relative;
top: 5px;
left: 10px;
cursor: pointer;
background-color: transparent;
background-image: url(../_images/btn_submit-red.png);
}
I would appreciate some help getting that text to move out of the way.
Thanks.
Since IE is stupid and whatnot, it wouldn't surprise me if text-indent only affects actual text nodes, and the button's value would seem not to be a text node.
You could try using the <button> tag instead, to see if that got you better results, but no promises.
EDIT: Here's an article that deals with the same issue, and offers a solution.
input.button{
width:114px;
height:37px;
border: none;
background: transparent url(images/submit_btn.gif) no-repeat center;
overflow: hidden;
text-indent: -999px;
/* The fix:*/
font-size: 0;
display:block;
line-height: 0;
}