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">
Related
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 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/
Wondering whether if there is a css-only way to perform to toggle styles on the corresponding label on input's focus.
So far I have:
$(document).on('focus active', 'input',function(){
$('label[for='+$(this).attr('id')+']').addClass('active');
});
$(document).on('blur', 'input',function(){
$('label[for='+$(this).attr('id')+']').removeClass('active');
});
HTML:
<div class="row">
<label for="contact_form_mail">Email</label>
<input id="contact_form_mail" name="contact_form_mail" type="email" placeholder="Your e-mail address...">
</div>
And CSS:
.active{ color:red; }
Edit: I am surely aware of the child and sibling selectors "workarounds", but rearranging clean markup for the pure sake of styling seems not right, so if there is another pure css way this answer wins!
http://jsfiddle.net/fchWj/3/
Try this way:- Place your label after input and float it left. And apply siblings.
Html
<div class="row">
<input id="contact_form_mail" name="contact_form_mail" type="email" placeholder="Your e-mail address...">
<label for="contact_form_mail">Email</label>
</div>
CSS
label {
float:left;
}
input:focus + label {
color:red;
}
Demo
This is a hack to get the adjacent sibling selector work as it applies only on the following element and not the preceding one. ~ will select all the adjascent siblings after this element. So if you are having different .row for each section of inputs then use +.
If you are willing to switch elements, than here you go
Demo
<div>
<input type="text" />
<label for="e_mail">E-Mail</label>
</div>
label {
float: left;
margin-right: 5px;
}
input[type=text]:focus + label {
color: red;
}
Explanation: We are using + adjacent selector here, so when the textbox is focused, we select the label tag and apply color red
Note: Don't forget to clear floats ;)
It's possible with CSS only, without switching the order of the label and input. You can use a :focus-within CSS pseudo-class on the parent element, which applies to elements, that has a child element with the focus.
In your example, you could use the following:
.row:focus-within label {
color: red;
}
Note, that this pseudo-class is relatively new, so only modern browsers support it.
There is, but only if you place the label after the input.
<input name="field" type="text" />
<label for="field">Label Here</label>
input:focus + label{
color: red;
}
Now if you want the label to be placed before it, then you need to do some css styling with position absolute to place the label before the input field, then add some margin left on the input to move it to the right.
<div>
<input name="field" type="text" />
<label for="field">Label Here</label>
</div>
div{
position: relative;
}
input{
margin-left: 40px;
}
label{
position:absolute;
left:0;
}
This give you label on top of input, highlight label while input focus.
HTML
<div class="row">
<input id="contact_form_mail" name="contact_form_mail" type="email" placeholder="Your e-mail address...">
<label for="contact_form_mail">Email</label>
</div>
<code>
.row{
display:flex;
flex-direction:column-reverse;
align-self:flex-start;
}
.row input:focus{
border: 1px solid red;
}
.row input:focus+label{
color:red;
}
</code>
First we can use a selector that matches a label immediately followed by the input tag (input:focus + label). But there is still the problem, that the label follows after the actual input field. If one would like to have it above the text input we need to switch the positions of the controls. This can be done with a CSS pseudo-table.
<div class="pseudo-table">
<input id="yourname" name="yourname" type="text" placeholder="Name...">
<label for="yourname">Name</label>
</div>
The style for the artifical table is...
.pseudo-table { display: table; }
With this in place we could transform the label e.g. to a table-header-group:
label { display: table-header-group; }
and the input field to a table-row-group:
input { display: table-row-group; }
In combination with our followed by selector we're done and it looks right:
input:focus + label {
color:red;
font-weight: bold;
}
For a demo please see this Fiddle
HTH
There is no selector to match a preceding element...
This matches a label immediately followed by an input tag.
input:focus + label {
color: red;
}
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.
I have the following
<div class="comment-wrap">
<textarea></textarea>
</div>
Whenever the textarea is in focus, I want to style the comment-wrap div. I've tried:
#hallPost-inner + textarea:focus {
background: red;
}
This does not work. Any ideas on how I can style the comment-wrap div whenever the textarea is in focus, meaning the cursor is blinking in the textarea and the user can type?
Thanks
Not sure what #hallPost-inner is, but in general CSS selectors cannot ascend, meaning you would need to have the textarea:focus selector, but then would need to style an ancestor element, which cannot be done in css. Here's a good resource, among many others. The link shows how an easy javascript solution can be achieved as well.
With JavaScript and jQuery, you could do:
$("textarea").live("focus", function(e) {
$(this).closest(".comment-wrap").css({
"background": "red"
});
});
Use the pseudo selector :focus-within. Note that any child in focus will effect the parent. If you have more children and just wanna apply when the event hits the <textarea>, you will need JS.
Link for more details. (css-tricks)
Ex.:
form{
padding: 20px;
background-color: gainsboro
}
input{
text-align: center
}
form:focus-within {
background-color: yellow
}
<form>
<input type="text" placeholder="name">
<input type="text" placeholder="lastname">
<input type="button" value="Go!">
</form>
Note: not all browsers support :focus-within