I'm having a problem with modifying labels that belong to a specific input.
Modifying a later div when the appropriate input - checkbox is checked works without problems. But if I try to use the smae method for the labels it fails. Additionally if I put an additional div around a label and try to access this instead of the label (on a checked for the appropriate input) it also fails to do anything.
My Question here is mostly what am I doing wrong there?
HTML
<input type="radio" id="TabOne" class="sheet-TabOne" name="Tab" checked="checked" />
<input type="radio" id="TabTwo" class="sheet-TabTwo" name="Tab" />
<div class="sheet-TabHeader">
<label for="TabOne" class="sheet-TabOne">One</label>
<label for="TabTwo" class="sheet-TabTwo">Two</label>
</div>
<div class="sheet-TabContent sheet-TabOne">
First content
</div>
<div class="sheet-TabContent sheet-TabTwo">
Second content
</div>
CSS:
label.sheet-TabHeader {
float: left;
width: auto;
border: 2px solid #A52A2A;
width: 150px;
height: 20px;
font-size: 18px;
background: #fff;
color: black;
}
input.sheet-TabOne:checked ~ label.sheet-TabOne,
input.sheet-TabTwo:checked ~ label.sheet-TabTwo
{
background: black;
color: red
text-shadow: 0px 0px 5px black,0px 0px 5px black,0px 0px 5px black;
}
div.sheet-TabContent {
display: none;
clear: left;
}
input.sheet-TabOne,
input.sheet-TabTwo
{
display: none;
}
input.sheet-TabOne:checked ~ div.sheet-TabOne,
input.sheet-TabTwo:checked ~ div.sheet-TabTwo
{
display: block;
}
AFAIU, label tag is for input tag only. You can't use it with a div tag. And it links by the input id. You're trying to link them to a div without any id.
Related
I want to align two inputs in the same line.
I used the solutions available here:
http://jsfiddle.net/XAkXg/
http://www.java2s.com/Code/HTMLCSS/Form/inputclassidselectorandpropertyselector.htm
Aligning html inputs on same line
html form - make inputs appear on the same line
Everything would work, but in my case, the input[type=text] has been defined earlier
The CSS code looks pretty much as this:
input {
margin-left: 50px;
}
input[type=text] {
width: 75%;
min-width: 450px;
padding: 12px 20px;
box-sizing: border-box;
outline: none;
border: 1px solid #f7fbff;
background-color: #f7fbff;
}
input[type=text]:focus {
background-color: #c6e2f2;
}
input[type=number]:focus {
background-color: #c6e2f2;
}
and now I have implemented the location feature into my HTML code:
<figure class="fig" id="location">
<label>
<div class="order">1</div>
<p>Location<span class="asterisk">*</span></p>
</label>
<button class="locbtn" id="btn-geolocation">Find my location</button>
<br>
<label for="lat" class="location">Latitude</label>
<input type="text" name="latitude" class="location">
<label for="lon" class="location">Longitude</label>
<input type="text" name="longitude" class="location">
<div style="clear:both;"></div>
</figure>
and accordingly CSS:
.location {
width: 50x;
float: left;
vertical-align: top;
margin: auto;
}
.location input[type=text]{
width: 25px;
display: inline-block;
}
and the effect is, as you can see below:
the input texts don't work, since they have been defined earlier in the code (for entire form).
How can I make the input[type=text] definition also for this section considered?
Moreover, instead of display: inline-block; I tried: display: inline; and float: left; It didn't work either.
i have a "vue" application working properly in all browsers except internet explorer.
The main error I find in IE is the fact that it does not recognize the value of an input if I hide it and wrap it with an image.
This would be my html
<div class="item-wrapper">
<form class="item-form" #submit.prevent="onSubmit">
<div class="cie-item-image" v-on:click="imageSelected = true">
<div class="cie-item-column">
<label>
<input
type="radio"
name="selectedItem"
value="1"
v-model="itemFormInfo.selectedItem"
#change="onChangeItem($event)"
/>
<img src="../../assets/1.png" />
</label>
<p class="cie-item-subtitle">Pen</p>
</div>
<div class="cie-item-column">
<label>
<input
type="radio"
name="selectedItem"
value="2"
v-model="itemFormInfo.selectedItem"
#change="onChangeItem($event)"
/>
<img src="../../assets/2.png" />
</label>
<p class="cie-item-subtitle">Pencil</p>
</div>
<div class="cie-item-column">
<label>
<input
type="radio"
name="selectedItem"
value="3"
v-model="itemFormInfo.selectedItem"
#change="onChangeItem($event)"
/>
<img src="../../assets/3.png" />
</label>
<p class="cie-item-subtitle">Rubber</p>
</div>
</div>
and here as the hidden with css
.cie-item-image {
display: flex;
justify-content: space-around;
}
.cie-item-column img {
display: block; /* removes the spacing underneath the image */
width: 365px; /* sets the width to the parents width */
height: 244px; /* set the height to the parents height */
object-fit: cover; /* prevents image from stretching */
border: 3px solid transparent;
cursor: pointer;
}
.cie-item-column:hover .cie-item-subtitle:before,
.cie-item-column:focus .cie-item-subtitle:before {
visibility: visible;
transform: scaleX(1);
}
.cie-item-column:hover img {
border: 3px solid $secondaryColor;
cursor: pointer;
opacity: 1;
}
/* IMAGE STYLES */
[type="radio"] + img {
cursor: pointer;
}
/* CHECKED STYLES */
[type="radio"]:checked + img {
outline: 2px solid $secondaryColor;
opacity: 1;
}
[type="radio"] + img {
opacity: 0.4;
}
.sub-title {
padding: 5px 0px 5px 0px;
display: flex;
justify-content: center;
color: $tertiaryColor;
font-family: "RalewayRegular";
font-weight: italic;
font-size: 20px;
margin-top: 30px;
font-weight: bolder;
}
Here I leave a link in which you can see the correct operation, in which if I select an image is selected and the method onchange returns me the correct data.
https://codepen.io/CharlieJS/pen/QWNJvXz
As I explained before, in all browsers it is working correctly except in IE, in which if I don't show the input and select it directly it doesn't recognize the value when selecting the image (neither returns value nor gives the style of selected)
Why do I get this error only in internet explorer?
What can you do to unify the style criteria and apply something similar in IE?
a greeting and thank you all for your time and help
I have found a solution from #Qtax
label{
display: inline-block;
}
label img{
pointer-events: none;
}
with this link
http://jsfiddle.net/VdJ9m/
and it works perfect
What would be correct approach to aligning placeholder to the top of the field, while input text appearing normally in the middle?
Any way to do that with CSS on input/::placeholder only, or should i rather construct a wrapper with span that would disappear when active and input field below it?
Here's a fiddle of what i've got now: https://jsfiddle.net/ejsLfvdn/1/
And that's what it should look like up to customers will:
The input masks are not the case here, i'm only struggling with the placeholder being aligned to the top, while input should appear normally in the middle. The placeholder MUST disappear after filling input.
I don't think that you will be able to do this by directly targeting the placeholder pseudo class (::placeholder).
Only a small subset of CSS properties can be applied to this element and position is not one of them:
https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder
I think you will need to take the approach of a wrapper with span and input and position appropriately.
You could use something like this with the only issue being the input must have the required attribute.
* {
box-sizing: border-box;
}
.input {
display: flex;
flex-flow: column-reverse nowrap;
border: 1px solid gray;
width: 220px;
}
.input input:valid + label {
opacity: 0;
}
.input input {
width: 100%;
padding: 10px;
border: none;
}
<div class="input">
<input required id="username" name="username" type="text" />
<label for="username">Username</label>
</div>
I hope I achieved what you need.
btw, I used jquery to hide the placeholder while typing and display it again if the field is empty.
$('.form-control').keyup(function(){
var val = $(this).val();
if(val == ""){
$('.placeholder').show();
}else{
$('.placeholder').hide();
}
});
.input-cont{
position: relative;
}
.form-control{
border: 1px solid #DDD;
border-radius: 5px;
height: 40px;
padding-left: 8px;
}
.placeholder{
position: absolute;
top: 5px;
left: 8px;
color: #3dc185;
font-size: 12px;
text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<form>
<div class="input-cont">
<span class="placeholder">Imię</span>
<input class="form-control" type="text" name="name">
</div>
</form>
</body>
</html>
You can use translateY(-100%) on your placeholder to move the text upwards and then give your textbox some padding at the top to reveal the text:
.placeholder-offset {
font-size: 20px;
padding-top: 25px;
}
.placeholder-offset::placeholder {
color: red;
transform: translateY(-100%);
}
<input type="text" placeholder="Username" class="placeholder-offset" />
I'm trying to achieve the following:
Create 3 input elements in a row
Each should have a logo to the left of it, centered perfectly.
Each should have a border-bottom that spans the logo as well.
Like the following image:
However with my current code the images can't be centered and the border doesn't span them. Here's my code:
input {
border: none;
width: 250px;
background-color: #393d49;
border-bottom: 1px solid #767D93;
padding: 10px;
}
form img {
width: 24px;
height: 24px;
}
<form>
<img src="assets/images/envelope.png" alt="Envelope icon indicating user's E-Mail.">
<input type="email" placeholder="E-Mail"><br>
<img src="assets/images/locked.png" alt="Lock icon indicating user's Password.">
<input type="password" placeholder="Password"><br>
<img src="assets/images/avatar.png" alt="Avatar icon indicating user's Name.">
<input type="text" placeholder="Username"><br>
</form>
As it was suggested, I would also use the font-awesome library. But if your not comfortable with that idea, here is how you can do without.
form, .form-row, input {
background-color: #051024;
}
.input-icon, label, input {
display: inline-block;
}
form {
padding: 0.8em 1.2em;
}
.form-row {
padding: 0.8em 0;
padding-bottom: 0.2em;
}
.form-row:not(:last-child) {
border-bottom: solid #18273a 1px; /* Only the last row has a border */
}
.input-icon {
width: 15px;
height: 15px;
margin: 0 10px;
}
label {
max-width:4em; /* Or the maximum width you want your lebel to be */
min-width:4em; /* Same */
color:white;
font-weight: 100;
}
input {
border:none;
padding: 0.8em 0.5em;
color: #6691c9;
font-size: 15px;
outline: none; /* No glowing borders on chrome */
}
<form>
<div class="form-row">
<!-- Put your image here, like so -->
<img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
<label for="form-email">Email</label>
<input id="form-email" type="email">
</div>
<div class="form-row">
<img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
<label for="form-password">Password</label>
<input id="form-password"type="password" placeholder="(8 characters min)">
</div>
<div class="form-row">
<img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
<label for="form-user">User</label>
<input id="form-user" type="text"><br>
</div>
</form>
If you're feeling adventurous
Try bootstrap, it has all you need to create cool web sites (it also includes the font-awesome library).
I have a working show/hide in CSS, using the radio type. All is good but when I try to add more then one show/hide they all open at the same time.
That makes sense to me, since they have the same ids and names. So I edited those, all is different, but when they go on the same page they lose the formatting and a mess comes out of it.
Any advice is appreciated (unless your advice is using js or jquery: I know it's easy with js but I really want to use css/html only)
Thanks!
/* showhide css */
input#show, input#hide {
display:none;
}
div#paragraph {
display:none;
}
input#show:checked ~ div#paragraph {
display:block;
float: left;
padding-top:20px;
}
input#hide:checked ~ div#paragraph {
display:none;
}
.showthis {
float: left;
background-color:#9b2f00;
border-style: solid black 1px;
color: #f2e07b;
padding: 5px;
box-shadow: 3px 3px 3px black;
text-align: center;
width: 200px;
font-size: 15px
}
.hidethis {
float: right;
background-color:#9b2f00;
border-style: solid black 1px;
color: #f2e07b;
padding: 5px;
box-shadow: 3px 3px 3px black;
font-size:13px;
/* showhide css 01 */
input#show01, input#hide01 {
display:none;
}
div#paragraph01 {
display:none;
}
input#show01:checked ~ div#paragraph01 {
display:block;
float: left;
padding-top:20px;
}
input#hide01:checked ~ div#paragraph01 {
display:none;
}
.showthis01 {
float: left;
background-color:#9b2f00;
border-style: solid black 1px;
color: #f2e07b;
padding: 5px;
box-shadow: 3px 3px 3px black;
text-align: center;
width: 200px;
font-size: 15px
}
.hidethis01 {
float: right;
background-color:#9b2f00;
border-style: solid black 1px;
color: #f2e07b;
padding: 5px;
box-shadow: 3px 3px 3px black;
font-size:13px;
}
<label for="show">
<span class="showthis">[Show]</span></label><input type=radio id="show" name="group"/><label for="hide"><span class="hidethis">[Hide]</span></label>
<input type=radio id="hide" name="group"/>
<div id="paragraph">
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
</div>
<br /><br /><br /> <br />
<label for="show01">
<span class="showthis01">[Show01]</span></label><input type=radio id="show01" name="group01"/><label for="hide01"><span class="hidethis01">[Hide01]</span></label>
<input type=radio id="hide01" name="group01"/>
<div id="paragraph01">
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
</div>
The idea is to use next selector + for show/hide a single item and use sibling ~ for all.
DEMO: http://jsfiddle.net/qjsmm6eq/3/
HTML
<label for="all">show all</label>
<input type="radio" name="radio" class="showall"/>
<label for="all">hide all</label>
<input type="radio" name="radio" class="hideall" />
<br/><br/><br/><br/>
<label for="a">show/hide</label>
<input type="radio" name="radio" class="single" />
<div class="content">a</div>
<br/><br/>
<label for="b">show/hide</label>
<input type="radio" name="radio" class="single" />
<div class="content">b</div>
CSS
.content {
visibility: hidden;
color: red;
}
.single:checked + .content {
visibility: visible;
}
.showall:checked ~ .content {
visibility: visible;
}
.hideall:checked ~ .content {
visibility: hidden;
}
EDIT: The checkbox solution is available here http://jsfiddle.net/qjsmm6eq/
EDIT 2: Changed back to radio, show/hide all on two buttons, and one for single item, the best I can do for now.
I followed the idea of sdcr (thank you very much!) and used checkboxes: they worked great, so even though is not a proper answer since my original question was different I paste the code anyway:
/* Showhide CSS only */
/* function */
label {
cursor: pointer;
}
#showhide {
display: none; /* hide the checkbox */
}
#paragraph {
display: none;
}
#showhide:checked + #paragraph {
display: block;
}
/* Showhide CSS only 02*/
label {
cursor: pointer;
}
#showhide01 {
display: none; /* hide the checkbox */
}
#paragraph01 {
display: none;
}
#showhide01:checked + #paragraph01 {
display: block;
}
<label for="showhide"><span class="title">I am the first</span></label>
<input type="checkbox" id="showhide"/>
<div id="paragraph">
original text
</div>
<br /> <br />
<label for="showhide01"><span class="title">I am the second</span></label>
<input type="checkbox" id="showhide01"/>
<div id="paragraph01">
secondary text
</div>