First things first!
Ingredients: We have a <input type="text"/>.
Problem: Every time the user types, delete or change a letter, under the text area must grow a line, as shown in the visual demo. I imagined different solutions:
dynamic size: the part of the line that adds/deletes/changes to the precedent one has the exact width of the letter added/deleted/changed.
static size: the part of the line that adds/deletes/changes to the precedent one doesn't count the exact width of the letter added/deleted/changed.
Question: How can I achieve one of those goals with HTML5 + CSS3 (preferibly without using javascript/jQuery) so the underline will grow (from left to right) while the user changes the text inside the input? I'M ASKING FOR THE ANIMATION.
Actual visual DEMO: From first to the last step, the user is typing, then he finished and as last, he delete everything.
[EDIT]: Note that the placeholder word in the visual demos is not random: the input tag contains everything, so if the user types something, then the underline is present and showed with the animation I'm asking for, otherwise the placeholder without any underline is showed. What I'm asking is the animation/transition! The underline of the input tag will seems to the user like it's growing/decreasing.
Just use css text-decoration property of input field
input {text-decoration: underline; }
Use this to achieve your requirement
not sure if i understood what you want. but it seems kind of simple. just use this
input {
text-decoration:underline
}
<input type="text" placeholder="insert text">
EDIT : sorry for the duplicate answer . Stackoverflow went in maintenance
mode while i was answering and the answer appeared now
This is possible trough the use of pseudo-elements , some CSS trickery for the width and a :hover setting for your anchor, to control your pseudo-elements.
.link {
text-decoration: none;
position: relative;
color: tomato;
}
.link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0%;
border-bottom: 2px solid #3366FF;
transition: 0.4s;
}
.link:hover {
color: blue;
}
.link:hover::after {
width: 100%;
}
<a class="link" href='#'>This link here</a>
Related
What I am doing: I am trying to make a different style of style of <abbr> tag, and I found This code on Stack Overflow.
However, this code has a small problem that the default hint will still be shown when you move your mouse on the tag.
What I tried: I tried to hide the element and then using pseudo element to show the text instead, and I do not know how to get the content by only using CSS, so I posted a question last night. However, it seems that: it is impossible to get the content of the element, so I have to post this question for another solution. Also, my other idea is to make it lose focus, but after losing focus, the hover event cannot be triggered either.
Here is the code from that post(changed):
abbr[class*=bright]{
color: black;
background: yellow;
position:relative;
cursor:help;
}
abbr[class*=bright]:hover::after{
color: white;
background: red;
content:attr(title);
position:absolute;
bottom: 0; right: 0;
transform: translate(100%, 100%);
white-space: nowrap;
}
<abbr title="Here is the title, as you can see, the default one is still there" class="bright">test</abbr>
What I want: As what I said, it has a small problem, so I want to hide the default hint, to only show my hint.
Also, I want a CSS-only solution.
I am doing a project that has a input like this:
<div className="search__bar__description form__control">
<input
placeholder="Filter by title, companies, expertise..."
aria-label="Enter company, title, or expertise here"
onChange={e => setSearchInput(e.target.value)}
value={searchInput}
/>
</div>
When the site is in desktop I want to have that whole long placeholder but when in mobile I want the placeholder just to say Filter by title...
I am trying to figure out how to do this is CSS. Can I put a span inside of the placeholder & then just hide it? Would that be valid HTML? If it isn't W3C valid HTML can you please tell me how to do this?
Thanks in advance!
First, you don't need JavaScript to do this. Although you cannot put a span inside an input, you can perform some trickery using the :placeholder-shown pseudo-class to achieve what you're after. Browser support for this pseudo-class, at the time of this post, is really good.
From MDN:
The :placeholder-shown CSS pseudo-class represents any <input> or
<textarea> element that is currently displaying placeholder text.
This example makes the input placeholder color transparent on smaller-sized screens, visually hiding it. The span containing the short label is then shown at this break point. Notice it's styled and positioned so that it looks as close to the original placeholder text as possible. Finally, using the pseudo-class mentioned above, we hide the short label when the original placeholder is not shown (when input is not blank).
.form__control {
position: relative;
}
.short-label {
display: none;
pointer-events: none;
}
#media screen and (max-width: 700px) {
::placeholder {
color: transparent;
}
.short-label {
position: absolute;
left: 4px;
top: calc(50% + 1px);
transform: translateY(-50%);
font-size: 11px;
color: rgb(43%, 43%, 43%);
font-family: sans-serif;
letter-spacing: 0.4px;
display: block;
font-weight: lighter;
}
input:not(:placeholder-shown)+.short-label {
display: none;
}
}
<div class="search__bar__description form__control">
<input placeholder="Filter by title, companies, expertise..." aria-label="Enter company, title, or expertise here" />
<span class="short-label">Filter by title...</span>
</div>
jsFiddle
You can't put a span inside a placeholder.
The common solution to what you want to achieve is to have the placeholder text as a separate element, underlaid behind the text field. And then you can do whatever markup and styling you want to it. This, of course, is more effort, but such is the way of bespoke engineering.
You can see an advanced example here: https://css-tricks.com/float-labels-css/
If you ignore the animations, the take-away from his code example is that the <label> element is used instead of the placeholder attribute, and is underlaid behind the input field, so it looks the same, but then can be manipulated with all the same CSS (int his case, adding some fancy transitions) and sub-elements as any other standard element.
I am trying to underline an <input type="date"> field using style="text-decoration: underline;" but it doesn't seem to work. Is there another way to underline the set date value? I would also like to apply this for time.
NOTE I am able to apply font-weight and color properties to these inputs but not text-decoration
EDIT
It seems the above is not a sufficient explanation of what I am trying to achieve.
Basically:
<input type="date"> will yield 15-02-17
I am trying something like:
<input type="date" style="text-decoration: underline;"> to yield an underlined 15-02-17
But this does not work. Is there another way?
ANOTHER EDIT
Preferably the solution should be generalized to all browsers.
Put this code in the CSS.
input::-webkit-datetime-edit-fields-wrapper {
text-decoration:underline;
}
The date tag consists of different div and span tags, which are enveloped by input::-webkit-datetime-edit-fields-wrapper in Chrome
EDIT : Example date input tag in Chrome
I'm not sure you can style <input type="date"> with text-decoration.
Not the nicest solution, but you could manually add an underline..
.wrap {
position: relative;
display: inline-block;
}
.wrap:after {
content: '';
position: absolute;
bottom: 2px;
left: 4px;
height: 1px;
width: 54%;
background: red;
}
<div class="wrap">
<input type="date">
</div>
CODEPEN
Note that you can't add pseudoelement to input, so you'll have to position it relative to something else.
I'm affraid the visualization of html5 inputs is browser-specific (kinda like fieldsets), thats why text-decoration: underline; won't work. You will likely run into issues too when trying to style the calendar it is showing.
I think your best bet is to use a plugin. There are plenty ot there, ie: https://github.com/fengyuanchen/datepicker
Also, you can edit your question and ask for the specific browser you want to do this, I'm sure we can find out the style needed.
Instead of labeling each field in a form, it is sometimes preferable (from a design standpoint) to have placeholder text in each field. For example, instead of having this:
----------------------------------
Full Name: | |
----------------------------------
you have this:
----------------------------------
| Full Name |
----------------------------------
The when you click in the field, the text disappears and you can write whatever you want. If you skip over the field without entering any text, then the placeholder reappears.
I've seen this done many ways, but all methods involve JavaScript. For example, Twitter does a decent job on their signup page but if Javascript is disabled you end up typing your name over the word 'Full name'.
I'm looking for a CSS-only method that would work even with JavaScript disabled. The only potential solution I've come up with is to set the background of the <input> tag to an image of the desired text and then use the input:focus pseudo-class to clear the background image when someone clicks on the text box. This seems to work but it would be nice not to have to use images.
Does anyone know of a good resource on how to do this?
This is the preferred method, and works in all current browsers:
<input type="text" name="" placeholder="Full Name"/>
This version works for IE9 and before:
<input type="text" name="" value="Full Name" onfocus="value=''" onblur="value='Full Name'"/>
You can do this with a <label> placed behind the index using z-index and a transparent background-color on the <input>. Use :focus to change to a white background.
:first-line has some Firefox issues.
Demo: http://jsfiddle.net/ThinkingStiff/bvJ43/
Note: See code-sushi's comment below for blur issues: Placeholder text in an input field with CSS only (no JavaScript)
Output:
HTML:
<label class="input">enter name<input /><label>
CSS:
.input {
color: gray;
display: block;
font-size: small;
padding-top: 3px;
position: relative;
text-indent: 5px;
}
input {
background-color: transparent;
left: 0;
position: absolute;
top: 0;
z-index: 1;
}
input:focus, input:first-line {
background-color: white;
}
Try this:
HTML
<div>
<input type="text" id="text"></input>
<label for="text">required</label>
</div>
CSS
.text-wrapper {
position: relative;
}
.text-input-label {
position: absolute;
/* left and right properties are based on margin, border, outline and padding of the input text field */
left: 5px;
top: 3px;
color: #D1D1D1;
}
#text:focus + label {
display: none;
}
Working Fiddle
All of the presumably CSS-only answers above have neglected a critical component which is required in order to prevent the label acting as a pseudo-placeholder from "bleeding through" once the user is no longer focused on that particular field.
Hint:
input:valid { background-color:white; }
The pseudo-class :valid obtains whenever a field has any value other than ''. So when your user enters anything in the field of his or her own, the label displayed there will stop being displayed.
Be advised with <input type="email" /> fields, the pseudo-class :valid does and will actually require input of a valid email format (e.g. "xxxx#xxx.com" -- or .net or .org, etc.).
Full instructions how to do this here: http://css-tricks.com/float-labels-css/
Try this: it solves the overflowing placeholder and multi-input cases. The trick is to move the labels behind their inputs and reorder them visually.
You don't need an extra div to achieve what you want.
Like this one:
Or should I do like this instead and change the font-size to zero:
Home
Edit:
No one here seems to understand my question. So I'll post some CSS too:
#logo {
display: block;
width: 326px;
height: 69px;
background-image: url(images/logo.gif);
background-repeat: no-repeat;
}
#logo:hover {
background-image: url(images/logo-hover.gif);
}
It looks like that, so I can't replace it with an image because then the hover wouldn't work. Seems like there is no solution to this so I guess I'll skip it.
Not including descriptive text of one form or another (text, title or description) would be a serious accessibility failure regardless of any SEO issues.
Edit: If you're asking how to hide the text of a link given a desire to use a background image, there's a few ways to do that. My preferred option (where possible) is to provide a fixed height and then a line height ~3 times as large and turn overflow off. You can also adjust letter spacing to reduce the width towards zero, e.g. from production code:
background: transparent url(../images/sprites/icons.gif) no-repeat;
a.foo
{
width: 16px;
height: 16px;
display: block;
overflow: hidden;
line-height: 666px;
letter-spacing: -1.1em;
}
As I understand, Google does use link text to rank pages. A page with an incoming link text of "foo" will give that page a higher search result position when searching for "foo".
Using your example, you could do the following:
Use a descriptive text in the link:
Foo
<style type="text/css">
a.foo {
display: block;
text-indent: -999em; /* Hide the text, using a negative indent (only works on single lines) */
background: url(foo.png) no-repeat;
width: 329px;
height: 69px;
}
a.foo:hover {
background-position: 0 -69px; /* Using spites to switch between normal and hover state */
}
</style>
Use an image in the page:
<img src="foo.png" width="329" height="69" alt="Foo" />
<style type="text/css">
a.foo:hover {
background: url(foo-hover.png) no-repeat;
}
a.foo:hover img {
visibility: hidden; /* Hide the image on hover, so the background of the link is shown, but dimensions and page flow stay the same */
}
</style>
Which method you choose, depends on what you want to do with it. For example: if you're creating an print style sheet, using the image would be preferred, because background images won't be printed (by default).
You should provide either an image or text for the link. If you go the image route, be sure to have alternate text as well that describes the image and/or the link destination.
Failure to provide ANY context for the link, which is what you are doing now, having nothingness be a link, is poor usability as there is no visual hint for a user using a conventional browser or any way for a screen-reader to handle the link.
A better approach may be to put an image in the a tag; the a:hover CSS can still work with this (at least with some browsers). As a simple example,
a { color: #30f; }
a:active, a:hover {
text-decoration: none;
color: #F30;
background: yellow;
}
can cause a yellow bar to appear adjacent to an image in an a href.
In the terms of SEO, Atl tag is needed as long as it involves images.