I am strangling with CSS overlay...
My sample has two sets of input tags with label on top of it
Clicking on the first number nicely switches to the edit mode.
Unfortunately, clicking on the second number doesn't really work as expected.
div[class="number_container"]>input:focus+label {
display: none
}
.number_container {
position: relative;
}
.number_content {
position: absolute;
top: 1px;
left: 1px;
height: 22px;
width: 148px;
text-align: center;
background: white;
}
<body>
<div class="number_container">
<input id="1" name="1" style="width: 150px;" type="number" value="100000">
<label class="number_content" for="1">$1,000,014</label>
</div>
<br/>
<br/>
<div class="number_container">
<input id="2" name="2" style="width: 150px;" type="number" value="200000">
<label class="number_content" for="1">$2,000,014</label>
</div>
</body>
it seems that CSS selector somehow selects the first div element
Nevertheless it works with tab key
any help highly appreciated
Issue is about you have mentioned for="1" that refers first input automatically when you focus on second input. So change it to "2" will solve the issue. check below snippet for reference.
div[class="number_container"]>input:focus+.number_content {
display: none
}
.number_container {
position: relative;
}
.number_content {
position: absolute;
top: 1px;
left: 1px;
height: 22px;
width: 148px;
text-align: center;
background: white;
}
<body>
<div class="number_container">
<input id="1" name="1" style="width: 150px;" type="number" value="100000">
<label class="number_content" for="1">$1,000,014</label>
</div>
<br/>
<br/>
<div class="number_container">
<input id="2" name="2" style="width: 150px;" type="number" value="200000">
<label class="number_content" for="2">$2,000,014</label>
</div>
</body>
try changing the "for" of your second label to "2" so it matches with the second input
Related
How to add small letter (sub) under a word in html and css?
I am attaching the screenshot.
Want to write "Max 100, Min 1 just like the picture below.
my code is here:
<input type="text" class="textarea" alt="" value="" style="color: #1c91df; height: 50px; width: 100%; margin-top: 0px; margin-bottom: 0px; border-color: #1c91df; box-shadow: none; border-width: 1px;">
<input type="number" class="textarea" alt="height" value="10" style="color:#30a2ee;"/> Height <sub>Max 100</sub> <sub>Min 1</sub>
<input type="number" class="textarea1" alt="depth" value="10" style="color:#30a2ee;"/> Depth <sub>Max 100</sub> <sub>Min 1</sub>
I hope this is what you're looking for. : )
I am attaching a screenshot of it.
Here's the code.
<div class="demention">
<input type="number" class="textarea" alt="height" value="10" style="color:#30a2ee;"/>
<p class="big_text">Height</p>
<input type="number" class="textarea" alt="depth" value="100" style="color:#30a2ee;"/>
<p class="big_text">Depth</p>
</div>
<style>
.demention {
display: flex;
flex-direction: row;
align-content: center;
min-height: 50px;
}
.demention .textarea {
margin-right: 10px;
padding: 10px;
width: 100px;
border: 1px solid #30a2ee;
}
.demention .big_text {
position: relative;
padding-right: 30px;
color: #30a2ee;
}
p.big_text:before {
content: "Max. 100";
position: absolute;
left: 0;
top: 25px;
opacity: 0.5;
}
p.big_text:after {
content: "Min. 1";
position: absolute;
left: 0;
top: 40px;
opacity: 0.5;
}
</style>
sub {
text-transform: lowercase;
}
There are 5 different values you can use:
**lowercase**: makes all of the letters in the selected text lowercase
**uppercase**: makes all of the letters in the selected text uppercase or ALL CAPS
**capitalize**: capitalizes the first letter of each word in the selected text
none: leaves the text's case and capitalization exactly as it was entered
**inherit**: gives the text the case and capitalization of its parent
**full-width**: This is a keyword forcing the writing of a character (mainly ideograms and Latin scripts) inside a square.
There are million of ways to do that. For example you can use flex:
<div class="mygroup">
<input type="number" class="textarea" alt="height" value="10" style="color:#30a2ee;"/>
<div class="mystyle">
<span>Height</span>
<sub>Max 100</sub>
<sub>Min 1</sub>
</div>
<input type="number" class="textarea1" alt="width" value="10" style="color:#30a2ee;"/>
<div class="mystyle">
<span>Width</span>
<sub>Max 100</sub>
<sub>Min 1</sub>
</div>
</div>
And this css:
.mygroup {
display: flex;
}
.mystyle {
display: flex;
flex-direction: column;
}
Please add this custom css inside your css file and check again.
sub {
text-transform: lowercase;
}
I want to add an "€" symbol on the right of the input field, I saw some examples online but sadly they dont work because I already have a label for my input. Is there a way to do it with the label already in use?
Heres the HTML code:
<div class="inputfield">
<label> Example </label>
<input id="idExample" type="number" name="input" placeholder="0.00" pattern="[0-9]+" required>
</div>
and in case you want to see what CSS I have:
.inputfield input {
border-radius: 10px;
width: 100px;
margin-left: 100px;
margin-top: 10px;
margin-bottom: 10px;
padding: 5px;
}
I would use a pseudo-element, mostly because you then can set a data-attribute with javascript, if you ever going to need to change currency in the future.
Inputs don't have pseudo-elements, so I needed to wrap the input in a span. Then I'm able to use position: absolute in combination with transform: translate to put the € where I wanted it.
.inputfield input {
border-radius: 10px;
width: 100px;
margin-left: 100px;
margin-top: 10px;
margin-bottom: 10px;
padding: 5px;
}
.inputfield span {
position: relative;
}
.inputfield span[data-currency]::after {
position: absolute;
content: attr(data-currency);
right: 1em;
top: 50%;
transform: translate(-100%, -50%);
}
<div class="inputfield">
<label> Example </label>
<span data-currency="€"><input id="idExample" type="number" name="input" placeholder="0.00" pattern="[0-9]+" required></span>
</div>
please see if the following works for you...
HTML
<div class="inputfield">
<label> Example </label>
<input id="idExample" type="number" name="input" placeholder="0.00" pattern="[0-9]+" required>
<span class="currency">€</span>
CSS
<style>
.inputfield input {
border-radius: 10px;
width: 100px;
margin-left: 100px;
margin-top: 10px;
margin-bottom: 10px;
padding: 5px;
}
.currency {
position: relative;
left: -20px
}
Play around with the left value on the currency style to get your desired position.
The quickest and simplest way is just adding a currency sign before/after your input tag like:
<input id="idExample" class="currency" type="number" name="input" placeholder="0.00" pattern="[0-9]+" required>€
if you need to style the currency sign you can place it in a span tag:
<input id="idExample" class="currency" type="number" name="input" placeholder="0.00" pattern="[0-9]+" required><span class="euroClass">€</span>
Try this out:
<input placeholder="Type something">
<span>₠</span>
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 need to align fields with their labels, all in 1 straight horizontal line. I'd normally fix this in the HTML, but I can't edit it, so I need it to be fixed with CSS.
This is the jsfiddle demo: http://jsfiddle.net/83hxF/
My HTML:
<label for="field_21770004">name</label>
<input id="field_21770004" type="text" title="Please fill out this field." placeholder="" name="fields[21770004]"></input>
<div id="field_21770004_errors" class="validation error"></div>
<label for="field_21927140">depart</label>
<select id="field_21927140" title="Please fill out this field." placeholder="" name="fields[21927140]"></select>
<div id="field_21927140_errors" class="validation error" style="display: none;"></div>
<label for="field_21769174">platform</label>
<select id="field_21769174" title="Please fill out this field." placeholder="" name="fields[21769174]"></select>
<div id="field_21769174_errors" class="validation error"></div>
My CSS:
#field_21770004 {
width: 150px;
}
#field_21927140 {
position: absolute;
top: 10px;
left: 250px;
}
#field_21769174 {
position: absolute;
top: 10px;
left: 350px;
}
There are several ways that you can do that, have them aligned vertically or horizontally.
1st method:
HTML:
<label for="field_21770004">name</label>
<input id="field_21770004" type="text" title="Please fill out this field." placeholder="" name="fields[21770004]"></input>
<div id="field_21770004_errors" class="validation error"></div>
<label for="field_21927140">depart</label>
<select id="field_21927140" title="Please fill out this field." placeholder="" name="fields[21927140]"></select>
<div id="field_21927140_errors" class="validation error"></div>
<label for="field_21769174">platform</label>
<select id="field_21769174" title="Please fill out this field." placeholder="" name="fields[21769174]"></select>
<div id="field_21769174_errors" class="validation error"></div>
CSS:
#field_21770004 {
width: 150px;
display:inline;
}
Demo: http://jsfiddle.net/83hxF/4/
2nd method:
HTML:
<label for="field_21770004">name</label>
<input id="field_21770004" type="text" title="Please fill out this field." placeholder="" name="fields[21770004]"></input>
<div id="field_21770004_errors" class="validation error" style="display:none";></div>
<label for="field_21927140">depart</label>
<select id="field_21927140" title="Please fill out this field." placeholder="" name="fields[21927140]"></select>
<div id="field_21927140_errors" class="validation error" style="display:none";></div>
<label for="field_21769174">platform</label>
<select id="field_21769174" title="Please fill out this field." placeholder="" name="fields[21769174]"></select>
<div id="field_21769174_errors" class="validation error" style="display:none";></div>
CSS:
#field_21770004 {
width: 150px;
}
#field_21927140 {
top: 10px;
left: 250px;
}
#field_21769174 {
top: 10px;
left: 350px;
}
Demo: http://jsfiddle.net/83hxF/5/
3rd method: (Changing CSS only)
#field_21770004 {
width: 150px;
}
#field_21927140 {
top: 10px;
left: 250px;
}
#field_21769174 {
top: 10px;
left: 350px;
}
#field_21770004_errors{
display:none;
}
#field_21769174_errors{
display:none;
}
Demo: http://jsfiddle.net/83hxF/15/
It's not really clear to me what you mean. Align the labels where?
This is a solution that will align them in a tabular way, the label next to the input/select fields, each in their own line.)
label {
display: inline-block;
width: 6em;
}
.validation {
margin-bottom: 2em;
}
(This assumes that the display: none; on the validation error field can be removed or altered. What is it there for in the first place? Can't this be done in the CSS file as well?)
Please try to explain a little better so I can be of better help.
Try floating the inputs/selects left and clearing right, and floating the labels left and clearing left.
input, select {
float: left;
clear: right;
}
label {
float: left;
clear: left;
}
Here's an updated fiddle: http://jsfiddle.net/ZHVpc/
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();
})