having a blonde moment here, trying to use CSS to tell a divider to change its background once an input has focus.
<p>
<label>Your Name</label>
<input type="text" name="your_name" id="your_name" value="" />
<div class="formhelper">Please enter your full name,<br />Character limit of 255</div>
</p>
Thats the HTML code, now I've tried the following but can't get it to work
.appformwrapper input:focus + div {
background-color: #CCC !important;
display: block;
}
.appformwrapper div ~ input:focus {
background-color: #CCC !important;
}
.appformwrapper input:focus {
background-color: #EEF;
}
Any ideas? I've done this once before in CSS but can't find me blasted code :(
It's not valid HTML to have a div in a p. Browsers will take your markup and treat it as this:
p
label
input
div
Which means your div actually comes after the p, rather than being inside it. So while you're trying to select a div that comes after an input, it won't work because the div doesn't exist in that position.
If you can change your p to another div, or your existing div to a span, your CSS should work. I'm not sure what exactly your second rule is supposed to do either, but it still won't work, as the general sibling selector ~ doesn't look at previous siblings.
Related
I want to know I can I do like the below picture from google sign up form
I want to add "#myemail" in the right of input,and I know maybe I can use the structure like this:
<div>
<input>
<div>
<div>
<span>
<div>
and merge the two div in one line,but when I had done this,my border color can't match bwtween two div
especically I have shadow css in my code,there will be a line between two div,so I am really confused how to match two border color and shadow perfectly
Try using the one below. Just create a wrapper and style the wrapper with a border. Add an input with no border and outline also a span at the end.
If you want to add some border or some style when the user focus on the input you can make use of :focus-within pseudo-class. This will matches an element if the element or any of its descendants are focused. Reference
.input-container {
width: 250px;
display: flex;
border: 2px solid #a9a9a9;
justify-content: space-between;
}
.input-container input:focus,
.input-container input:active {
outline: none;
}
.input-container input {
border: none;
width: 100%;
}
.input-container:focus-within {
border: 2px solid rgb(114 76 252);
}
<div class="input-container">
<input type="text" class="input-field" />
<span>#gmail.com</span>
</div>
You can also use a placeholder attribute and style it
possible example
input[type="email"]::placeholder{text-align:right}
<input type="email" placeholder="#mail.com">
https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder
The ::placeholder CSS pseudo-element represents the placeholder text in an <input> or <textarea> element.
you can do it by floating the text of input to right
input[type='text']{
text-align:right;
}
input[type='text']:focus{
text-align:left;
}
Not sure what do you mean tho. But I don't think placing a line of text floating to the right like that has any practical purpose beside asthetic purpose. If you want example of email, use placeholder. For pre-filled value so users can type less: use value attribute. If you want user use exact email provider, says #gmail and not #yahoo, use form validation.
<input type="email" value="#gmail.com">
I want to make the same login effect than Twitter.
On twitter.com/login, you see that when you are typing in the text area, the grey color of the label "Phone, email, or username" or "Password" changes to blue.
So I've tried to make input:focus label {color: blue;}
But it doesn't work, I don't know why.
try using the general sibling selector like this
input:focus ~ label{
color: #0000ff;
}
Note that this code assumes input and label are siblings
Your code doesn't work because what you wrote basically says: "if I focus my input, put this css on my label which is a child of input". Now I'm assuming since this wouldn't be valid html, your label is not a child of your input.
The answer #arnavpanwar99 provided is correct, usually your input and label are siblings like this:
<div>
<label>My Label</label>
<input type="text" />
</div>
unfortunately, the sibling selector only works from left to right, meaning that something like this: input:focus ~ label would once again not work, since it goes once again from left to right (and the label is on the left side of your input, therefore the code is not affecting it).
Now if we switch positions, it would work:
div {
margin-bottom: 5px;
}
label {
color: grey;
}
input:focus ~ label {
color: red;
}
<div>
<input type="text" />
<label>My Label</label>
</div>
But unfortunately, now the label is on the wrong side.
The trick is, to use css (in my case I just used float: left but you can basically do everything you want to make it look right) to fix the appearance, while still using the "wrong" html setup:
div {
margin-bottom: 5px;
}
label {
color: grey;
}
input:focus ~ label {
color: red;
}
.pullLeft {
float: left;
}
<div>
<input type="text" />
<label class="pullLeft">My Label</label>
</div>
Set a class on a surrounding div and use :focus-within on that div followed by label to change the color of the label.
The reason why this works is because instead of looking for child elements of input, it checks if something is being focused within the surrounding div.
.input-group:focus-within label {
color: red;
}
<div class="input-group">
<label>My Label</label>
<input type="text" />
</div>
You can read more about focus-within here: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within
I am trying to have a checkbox change the content of a div but if the content isn't together (in the same div), then it will not work.
HTML:
<div>
<input type="checkbox" id="check">
<label for="check">Hello</label>
</div>
<div class="check"></div>
CSS:
.check:before {
display: block;
width: 100px;
height: 100px;
background: red;
content:'';
}
input:checked ~ .check:before {
content:'Content';
}
JSFiddle: https://jsfiddle.net/pgkwn4j6/
In your example one thats working is using "input:checked ~ .check:before" which selects "check" class div that is preceeding right after the input that is checked(sibling elements).
When you the put the label and input in a different div tag you need to select parent`s sibling which is not possible through css.
You can do it through Jquery.
CSS: how to select parent's sibling
above question showcases very similar problem you are having.
It does not work because it is not in the same div, in css you can not manipulate any element outside the parent element. To be able to manipulate an element outside you have to use jquery. Here your JSfiddle correct link:
JSFiddle Correct
$(document).ready(function(e) {
$('input#check').click(function(){
$('.check').toggleClass('show-content');
});
});
I have the following html:
<label>
<input type="checkbox" value="cb_val" name="cb_name">
my checkbox text
</label>
With CSS I added a background-color to the <label> tag.
label { background-color:#333; color:#FFF; }
Now I'd liked to change the background color of the label when the checkbox is checked.
I know how to do it with javascript, but is there a way to to it just using CSS?
I have seen some solutions, but they use the adjacent sibling selector and only work when the label appears after the checkbox.
I still hope to fix this without javascript, does anyone have a clue?
UPDATE:
As I was afraid of, it cannot be done this way, so i must do it with JS, or achieve the same visual effect with a different HTML structure.
I want to set the background color of the label and the textbox in one go, so I can go with a solution where the checkbox is placed absolute on top of the label. Good point PlantTheldea!
Or I can apply the background color to the label and the checkbox both.
Thanks everyone!
You can achieve this with pure css like so,
<input type="checkbox" id="cb_1" value="cb_val" name="cb_name">
<label for="cb_1">
my checkbox text
</label>
With this css,
label { background-color:#333; color:#FFF; }
input[type="checkbox"]:checked + label {
background: brown;
}
JSFIDDLE
Keep in mind
The label has to be after the checkbox so you will need to style it around more to keep the same look you had.
Here is an option of styling it more to have the same appearance as you wanted, New fiddle. THIS DOES NOT involve positioning anything absolute, just some trickery.
You can't style the label itself directly via only CSS when the label is checked, but you can style a sibling of the checkbox.
http://jsfiddle.net/QdDpL/
HTML
<label>
<input class="check" type="checkbox" />
<span class="label-text">Checkbox</span>
</label>
CSS
label {
background: yellow;
}
label .label-text {
background: cyan;
}
label input.check:checked + .label-text {
background: lime;
}
You may also be able to fiddle with floats and padding to make the checkbox appear as if it was inside the .label-text span.
See the following links for browser support on the sibling selector:
http://caniuse.com/css-sel2
Alternately as another answer said, you can style the label if it is a sibling of the checkbox - but then just like my answer still would not contain the checkbox in the label.
I know there are lot's of questions regarding this query here but none of them provide the solution for me.
HTML
<input id="tb1" type="text" class="note" />
<br>
<p class="note1"> This is not done.</p>
CSS
p.note1:before{
content: "Note:";
}
tb1.note:before{
content: "Enter your number";
}
I am trying with above code and the variation as found on the web but none seems to work for input tag. It's working for p tag.
EDIT: I can't add value attribute to input tag and manage css for the desired result. It's the limitation of the system.
EDIT2: Forget about my css, is there any way that placeholder text is possible without using placeholder attribute and just with plain css for input type="text"
:before creates a pseudo-element that is the first child of the element matched.
The selected element MUST be a container tag. An empty tag like <input> doesn't have any children element.
If you can't edit your HTML code manually, you're still able to that by using JavaScript:
document.getElementById("tb1").setAttribute("placeholder", "Enter your number");
Update
If you want to achieve this by using CSS only, you need to have a container element wrapping your <input> (or come after it).
BUT It doesn't work correctly as placeholder do. You'll not able to check the value of <input> by CSS. If you write something inside the <input>, after blur event, the generated placeholder will be displayed over the <input> again.
HTML:
<label>
<input id="tb1" type="text" class="note">
</label>
CSS:
label {
position: relative;
}
label:after {
content: 'Enter your number';
position: absolute;
left: 5px;
top: 0;
color: #bbb;
}
#tb1 {
position: relative;
}
#tb1:focus {
z-index: 10;
}
JSBin Demo
It doesn't work for the simple fact that this:
<input id="tb1" type="text" class="note"></input>
is not valid. <input /> elements are not containers. As the spec notes, endtags are forbidden (and essentially ignored by the browser): http://www.w3.org/TR/html401/interact/forms.html#h-17.4
If you cant manipulate the html and use placeholder="". Use javascript to manipulate the placeholder. Every css approach is hack-isch anyway.
E.g. with jQuery:
$('#myFieldId').attr('placeholder', 'Search for Stuff');
I have found this method but not supported by all browsers:
#tb1.note:empty:before{
content: "Enter your number";
}
Note: you have forgot to place an id selector # tb1.note
see this link
EDIT:
Try this for starters: (Note: you'll need some js to detect if text has been entered in the input)
Apart from this - I don't think this there is a css solution for placeholder text on an input element without using the placeholder attribute.
FIDDLE
Markup
<div class="container">
<input />
<div class="fakePlaceholder">Some placeholder text</div>
</div>
css
.container
{
position: relative;
}
input
{
background: transparent;
}
input:focus + .fakePlaceholder
{
display: none;
}
.fakePlaceholder
{
color:gray;
position:absolute;
top: 3px;
left: 5px;
z-index: -1;
}
You can't use pseudo elements on an input tag - or any other non-container elements for that matter
From the Pseudo-Elements tag info:
you cannot use them (pseudo elements) with replaced elements (see
below) which do not have actual content. This is because the generated
content resides within the element.
...
Replaced Elements
Any element whose appearance and/or dimensions are determined by some
external resource is considered to be a replaced element. Some
pseudo-elements cannot be applied to replaced elements because they
have no "content" or get replaced with something (such as user
interface controls). Replaced elements include images (<img>), inline
frames (<iframe>), line breaks (<br>), horizontal rules (<hr>),
plugins (<object>), form elements (<button>, <textarea>, <input>, and
<select>), videos (<video>), audio sounds (<audio>), and canvases
(<canvas>). Any other element is considered to be a non-replaced
element.
Another way this can be accomplished, and have not really seen any others give it as an option, is to instead use an anchor as a container around your input and label, and handle the removal of the label via some color trickory, the #hashtag, and the css a:visited. (jsfiddle at the bottom)
Your HTML would look like this:
<a id="Trickory" href="#OnlyHappensOnce">
<input type="text" value="" id="email1" class="inputfield_ui" />
<label>Email address 1</label>
</a>
And your CSS, something like this:
html, body {margin:0px}
a#Trickory {color: #CCC;} /* Actual Label Color */
a#Trickory:visited {color: #FFF;} /* Fake "Turn Off" Label */
a#Trickory:visited input {border-color: rgb(238, 238, 238);} /* Make Sure We Dont Mess With The Border Of Our Input */
a#Trickory input:focus + label {display: none;} /* "Turn Off" Label On Focus */
a#Trickory input {
width:95%;
z-index:3;
position:relative;
background-color:transparent;
}
a#Trickory label {
position:absolute;
display:block;
top:3px;
left:4px;
z-index:1;
}
You can see this working over at jsfiddle, note that this solution only allows the user to select the field once, before it removes the label for good. Maybe not the solution you want, but definitely an available solution out there that I have not seen others mention. If you want to experiment multiple times, just change your #hashtag to a new 'non-visited' tag.
http://jsfiddle.net/childerskc/M6R7K/