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
});
Related
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
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>
Ok, so basically what I need is that when I select some text in an <input> or in a <textarea>, a tooltip appears with two buttons, and then get the selected text in a Javascript variable.
The image below is an example of what I need:
var selectedText = "s is an in"
I'm using Powertip for the tooltip and Rangy for manipulating selections in <input> and <textarea>, the problem is that I can't manage to popup the tooltip and get the selected text in a JS variable after I select the text with the cursor.
Any suggestions on how to achieve this?
Thanks in advance.
UPDATE:
Thanks to Todd answer, I'm sharing what I was trying to achieve:
JSFiddle
This seems to work
$('input, textarea').powerTip({ manual: true }); // have to prevent default plugin
$('input, textarea').on({
'select': function() {
var selectedText = window.getSelection().toString();
$(this).powertip('show');
},
'blur': function() {
$.powerTip.hide();
}
});
You can add mouse up event on selection of a text and can get the selected text, after that when you will show the selected text, you can also show the tool-tip with that.
Here is the JSFiddle Link for showing the text selection, you can update this and can also show the tool-tip where I have printed the selected text.
How to show tool-tip box:
Step-1) You need to get the top and left of the input field.
Step-2) Create a box using HTML and CSS.
Step-3) Set it's position to absolute and it's container to relative.
Step-4) Set it's top and left to that you have received in Step-1.
Use a Modal to create popup, create a Text Field Select Event & a Function to trigger open anchor.
Thats all you need.
here is a working example I have created:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Text Select Modal</title>
<style>
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 300px;
height:130px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #151414;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }
</style>
<script type="text/javascript">
function myFunction() {
window.open("#openModal","_self");
}
</script>
</head>
<body>
<input type="text" onSelect="myFunction()">
<div id="openModal" class="modalDialog">
<div>
X
<br>
<br>
<br>
<br>
<br>
<input type="button" value="Button 1">
<input type="button" value="Button 2">
</div>
</div>
</body>
</html>
How to style the disabled radio button to exactly looks like enabled one. But still it should be uneditable.
I tried using readonly attribute but it is not working.
I don't want to go for any custom radio buttons. Want to do it with css/javascript/jQuery
Check the image below : disabled radio button is shown with red underline and enabled with blue
I haven't tested this in the older versions of the browsers. So in the global.css
input[type="radio"]:disabled {
-webkit-appearance: none;
display: inline-block;
width: 12px;
height: 12px;
padding: 0px;
background-clip: content-box;
border: 2px solid #bbbbbb;
background-color: white;
border-radius: 50%;
}
input[type="radio"]:checked {
background-color: black;
}
As I commented, you can do it using a fake div. You need a parent element to set relative position, then, with a little javascript you can do it fast to all input elements that you want:
// CSS
* { margin: 0; padding: 0; }
.disabled[disabled] {
color: red;
}
p { position: relative; }
.input_fakediv {
position: absolute;
width: 15px;
height: 15px;
top: 0;
left: 0;
}
// HTML
<p>
<input type="radio" name="group1" value="Milk" id="milk" class="disabled" /> <label for="milk">Milk</label>
</p>
<p>
<input type="radio" name="group1" value="Milk" id="milk" class="disabled" /> <label for="milk">Milk</label>
</p>
// JS
var $fakediv = $('<div class="input_fakediv"></div>');
$fakediv.insertAfter($('input[type="radio"]'));
Check it: jsfiddle
You need to use CSS to accomplish this. Here's a fiddle.
Basically what you need to do is target it with
selector[disabled] { /* Styles here */ }
<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;
}