I've made up a JSFiddle.
It's a login form that appears when hovering the Sign In menu, but when hovering the input autocomplete the login form disappears, and I don't want that.
How can I make the login form stay without disabling the input autocomplete, can this be made only with css?
<div class="login"> <span>Sign in</span>
<div class="login_form">
<label for="email">Email:</label>
<input type="text" id="email" name="email" value="" />
<label for="pass">Password:</label>
<input type="password" id="pass" name="pass" value="" />
<input type="submit" class="" value="Sign in" />
</div>
</div>
.login {
position: relative;
height:60px;
width:50px;
margin:30px;
}
.login:hover .login_form {
display: block;
}
.login_form {
box-shadow: 0 0 1px;
padding:10px;
position: absolute;
left: 0px;
top: 30px;
z-index: 9999;
display: none;
}
Not a good solution, but a really useful hint: http://jsfiddle.net/ymDTj/2/
Using JavaScript (jQuery):
$('.login').on('mouseover', function () {
$('.login_form', this).show();
}).on('mouseout', function (e) {
if (!$(e.target).is('input')) {
$('.login_form', this).hide();
}
});
Related
I'm new to CSS and I wanted to add some margin-right to the placeholder of an input:
<div class="input-group">
<input type="text" class="form-control search-engine" placeholder="Search this blog">
</div>
And this was my try on setting margin-right:
.search-engine ::placeholder{
margin-right:5px !important;
padding-right:5px !important;
}
But it didn't make any changes somehow!
So how to properly make changes and style the placeholder of an input in CSS?
Remove Padding or Margin From "Placeholder". and add in the input tag. like this
.input-group input{
padding:10px 20px;
}
.search-engine::placeholder{
}
<div class="input-group">
<input type="text" class="form-control search-engine" placeholder="Search this blog">
</div>
you can't do it. Your structure should be like this:
<label>
<input type="text" class="form-control">
<span class="placeholder">Search this blog</span>
</label>
then you can process your label text:
label {
padding: 10px;
position: relative;
}
.placeholder {
position: absolute;
left: 0;
top: 0;
}
Try this:
.form-control::placeholder{
padding-left: 5px;
}
.form-control::placeholder{
padding-left: 15px;
}
<div class="input-group">
<input type="text" class="form-control search-engine" placeholder="Search this blog">
</div>
Am designing the 'Login' page, here, the page look okay before I press the submit button, but, just after I pressed the submit button, it looks not okay. The second div moved little bit downward. Any help to solve this issue? pls refer the below image
html
<div class="LogIn">
<form id="UserLogIn" name="loginForm" method="post"> <!-- onsubmit="return validateForm(this);" -->
<label>Firstname Lastname</label><input type="text" name="username" placeholder="Firstname Lastname"/>
<span class="user-name">Name should not be empty</span>
<label>Password</label><input type="password" name="password" placeholder="Password"/>
<label>Confirm password</label><input type="password" name="password1" placeholder="Confirm password"/>
<span class="password">Password does not be match</span>
<label>Email</label><input type="email" name="email" placeholder="Email"/>
<span class="email">Email is not valid</span>
<label>Website</label><input type="url" name="url" placeholder="Website"/>
<span class="urlcontent">Invalid Website URL</span>
<input name="submit" type="submit" value="Submit"/>
</form>
</div>
<div class="BusinessConnect">
<p>Business Unit</p>
<div id="BuCheck" class="BusinessCont">
<p><input type="checkbox" name="checkboxG1" id="checkbox1" class="form-checkbox" value="Sapient"/><label for="checkbox1" class="form-label">Test</label></p>
<p><input type="checkbox" name="checkboxG2" id="checkbox2" class="form-checkbox" value="SapientNitro"/><label for="checkbox2" class="form-label">TestNitro</label></p>
<p><input type="checkbox" name="checkboxG2" id="checkbox3" class="form-checkbox" value="Test Global Market"/><label for="checkbox3" class="form-label">Test Global Market</label></p>
<p><input type="checkbox" name="checkboxG2" id="checkbox4" class="form-checkbox" value="Test Government Services"/><label for="checkbox4" class="form-label">Test Government Services</label></p>
<p><input type="checkbox" name="checkboxG2" id="checkbox5" class="form-checkbox" value="Test (m)PHASIZE"/><label for="checkbox5" class="form-label">Test (m)PHASIZE</label></p>
</div>
</div>
css
.BusinessConnect {
float: left;
font-size: 80%;
height: 30%;
margin-right: 0;
position: relative;
top: 3px;
width: 35%;
}
.LogIn {
float: left;
margin-left: 256px;
margin-top: 15px;
width: 30%;
}
After the 'submit' button pressed,
One of the way you can follow is by seperating the divs like this,
<section>
<div id="LogIn">
You can put your thing here
</div>
<div id="BusinessConnect">
<p>Business Unit</p>
Your second part
</div>
</section>
/// Your CSS
section {
width: 100%;
height: 200px;
margin: auto;
padding: 10px;
}
div#BusinessConnect {
border:1px solid #000000;
margin-left:50%;
height: 200px;
}
div#LogIn {
width: 45%;
float: left;
border:1px solid #000000;
height:200px;
}
Its just a sample, you can further work on it.
And I myself prefer using % instead of pixels, because they are helpful for responsive layouts.
Many different ways to accomplish what you'd like, but if floating isn't a necessity you could try the following:
.BusinessConnect {
display: table-cell;
vertical-align: top;
font-size: 80%;
height: 30%;
margin-right: 0;
position: relative;
top: 3px;
width: 35%;
}
.LogIn {
display: table-cell;
vertical-align: top;
margin-left: 256px;
margin-top: 15px;
width: 30%;
}
I want to display span tag after input tag.
But it displays before input tag.
Here I attached css and html code.
http://jsfiddle.net/sarurakz/8j3r13ec/
CSS:
span{
float:right;
margin-right:1%;
}
input {
display: inline-block;
float: right;
margin-right:20%;
}
Html:
<p>Password<input type="password" name="pass" id="pass" size=18 maxlength=50 required></p>
<p>Confirm Password<input type="password" name="cpass" id="cpass" size=18 maxlength=50 required><span id='message'></span></p>
validation:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script>
$('#pass, #cpass').on('keyup', function () {
if ($('#pass').val() == $('#cpass').val()) {
$('#message').html('<img src="image/tick.png" width=15px height=15/>').css('color', 'green');
$("#phone").prop('disabled', false);
}
else{ $('#message').html('<img src="image/delete1.png" width=15px height=15/>').css('color', 'red');
$("#phone").prop('disabled', true);}
});
</script>
I was not having any image so i just placed a random text there in span
span{
float:right;
margin-right: 8%;
margin-left: -17%;
}
input {
display: inline-block;
float: right;
margin-right:20%;}
<p>Password<input type="password" name="pass" id="pass" size=18 maxlength=50 required></p>
<p>Confirm Password<span id='message'>asdasd</span><input type="password" name="cpass" id="cpass" size=18 maxlength=50 required></p>
I wish a fiddle was there for this, but as per my understanding you can try to add float: left to both input and span
You cant do the validation and adding the tick image just with HTML and CSS. You will need to do the validation in Javascript.
See this working code snippet:
document.getElementById('pass').addEventListener('blur', function(){
var passwordLength = document.getElementById('pass').value.length;
if(passwordLength > 8 && passwordLength < 50){
var image = document.createElement('img');
image.src = 'http://yoozy.com/images/tick-icon.jpg';
this.parentNode.insertBefore(image, document.getElementById('pass'));
}
});
span{
float:right;
margin-right:1%;
}
input {
display: inline-block;
float: right;
margin-right:20%;
}
<p>Enter atleast 8 characters in this first password field and focusout to see thie validation working.</p>
<p>
Password
<input type="password" name="pass" id="pass" size=18 maxlength=50 required>
</p>
<p>
Confirm Password
<input type="password" name="cpass" id="cpass" size=18 maxlength=50 required>
<span id='message'></span>
</p>
use label and padding right and align the span position absolute
using label automatically focuses the input on click of text
label {
width: 400px;
display: inline-block;
padding: 0 30px 0 0;
position: relative;
margin: 5px 0;
}
input {
float: right;
}
span.icon {
font-size: 14px;
color: white;
text-align: center;
display: block;
line-height: 23px;
background: rgb(18, 208, 27);
border-radius: 50%;
width: 20px;
height: 20px;
right: 0px;
position: absolute;
top: 0;
}
<label>username
<input type="text" name="pass" id="pass" size=18 maxlength=50 required />
</label>
<label>Password
<input type="password" name="pass" id="pass" size=18 maxlength=50 required /> <span class="icon">✓</span>
</label>
I've been following tutorial on styling checkboxes using only CSS3 and here's what I came up with:
DEMO:
http://cssdeck.com/labs/jaoe0azx
Checkboxes are styled just fine - but when I tab through form controls -> checkbox is being skipped. Any advice why?
HTML:
<form role="form" id="login_form" data-mode="login">
<div class="form-group">
<label for="ue">Username or email:</label>
<input type="email" class="form-control input-lg" name="ue" id="ue" placeholder="" />
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" class="form-control input-lg" name="password" id="password" placeholder="" />
</div>
<div>
<input id="rememberme" type="checkbox" name="rememberme" value="1" class="checkbox_1" tabindex="0" />
<label for="rememberme" class="checkbox_1" tabindex="0">remember me</label>
</div>
<div id="auth_area_login_button">
<button class = "btn btn-lg btn-primary">
Login
</button>
</div>
</form>
CSS:
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css');
#login_form{padding:20px;}
label.checkbox_1 {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin: 0px;
}
label.checkbox_1:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 1px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 0px;
}
label.checkbox_1:hover:before{border-color:#66afe9;}
input[type=checkbox].checkbox_1 {
display: none;
}
input[type=checkbox].checkbox_1:checked + label.checkbox_1:before {
content: "\2713";
font-size: 15px;
color: #A0A0A0;
text-align: center;
line-height: 15px;
}
EDIT 1:
seems to work in firefox, but not in chrome...
Input must be accessible to receive focus. It works in chrome/chromium if you add following lines.
input[type=checkbox].checkbox_1 {
opacity: 0;
}
input[type=checkbox].checkbox_1:focus + label.checkbox_1:before {
border: 1px solid #66afe9;
}
Since the real checkbox is hide with display:none you can't focus it but you can also don't hide the element just make it be under the :before of the label:
input[type=checkbox].checkbox_1 {
position: absolute;
width: 16px;
height: 16px;
margin: 0;
border: 1px solid transparent;
margin-top: 3px;
}
Check this http://cssdeck.com/labs/pl4ljry7
Tested in Chrome
Because, it is not a checkbox.
Look at the css:
input[type=checkbox].checkbox_1 {
display: none;
}
The checkbox is actually hidden. So, you will not be able to focus it. The stylized square and checkmark shown are through the :before pseudo element on label. Pseudo-elements can't be focused. Nor can the labels.
I know this is an old question, but I came up with a Jquery solution when the CSS solution didn't work for me, and thought others might find this helpful. I wrapped the input in a div with the desired tabindex value and the class "checkbox-add-tabindex". Then, using Jquery, I transferred the tabindex from the div to the input.
HTML:
<div class="checkbox-add-tabindex" tabindex="10">
<input id="rememberme" type="checkbox" name="rememberme" value="1" class="checkbox_1" tabindex="0" />
<label for="rememberme" class="checkbox_1" tabindex="0">remember me</label>
</div>
Jquery:
$(".checkbox-add-tabindex").focus(
function () {
var tabval = $(this).prop("tabindex");
$(this).removeAttr("tabindex");
$(this).children(":first").attr("tabindex", tabval);
$(this).children(":first").focus();
})
i'm a beginner at CSS and trying to do a NETTUTS , but there's a portion in the webpage that i don't know what exactly to do in CSS to make it look right ...
I just can't get this input text boxes, textarea and the button to be aligned like that , and to be honest the tutor isn't doing a great job to clearing stuff out
Using alternative and absolute positioning, and setting top and right spacing is kinda no a good idea i think ... I'm trying to align them using FlexBox feature but don't know why those elements are not moving at all ...
Here's my HTML & CSS3 code (for chrome) :
<section id="getAfreeQuote">
<h2>GET A FREE QUOTE</h2>
<form method="post" action="#">
<input type="text" name="yourName" placeholder="YOUR NAME"/>
<input type="email" name="yourEmail" placeholder="YOUR EMAIL"/>
<textarea name="projectDetails" placeholder="YOUR PROJECT DETAILS."></textarea>
<input type="text" name="timeScale" placeholder="YOUR TIMESCALE"/>
<button>Submit</button>
</form>
#getAfreeQuote form {
display:-webkit-box;
-webkit-box-orient:vertical;
height:500px;
}
#getAfreeQuote input[name="yourName"]{
-webkit-box-ordinal-group:1;
}
#getAfreeQuote input[name="yourEmail"]{
-webkit-box-ordinal-group:1;
}
#getAfreeQuote textarea{
-webkit-box-ordinal-group:2;
}
#getAfreeQuote input[name="timeScale"]{
-webkit-box-ordinal-group:3;
}
#getAfreeQuote button {
-webkit-box-ordinal-group:4;
}
and the result :
Here's how I'd do it:
<section id="getAfreeQuote">
<form method="post" action="#">
<h2>Get a free quote</h2>
<input type="text" name="yourName" placeholder="YOUR NAME"/>
<input type="email" name="yourEmail" placeholder="YOUR EMAIL"/>
<textarea name="projectDetails" placeholder="YOUR PROJECT DETAILS."></textarea>
<br /><input type="text" name="timeScale" placeholder="YOUR TIMESCALE"/>
<br /><input type="submit" value="Submit!" />
<div class="clear"></div>
</form>
</section>
<style>
#getAfreeQuote h2 {
text-transform: uppercase;
color: blue;
}
div.clear {
clear: both;
}
#getAfreeQuote form {
width: 25em;
position: relative;
}
#getAfreeQuote input[name="yourName"]{
width: 43%;
}
#getAfreeQuote input[name="yourEmail"]{
width: 55%;
float: right;
}
#getAfreeQuote textarea{
width: 100%;
height: 10em;
}
#getAfreeQuote input[name="timeScale"]{
width: 100%;
}
#getAfreeQuote input[type="submit"]{
text-transform: uppercase;
background: orange;
border: none;
padding: 1em 2em;
color: white;
float: right;
}
</style>
You have a good start, but you need to know the basics of CSS layout properties. A good start would be to learn the basics from Sitepoint where a very useful guide is present. Good luck.
If you do not have to use a FlexBox you can use width: 50% for the top two text inputs and width: 100% for the textarea and bottom text input. After setting the form with to the desired width of the form