I want to make my font have a vertical color gradient without using Javascript, such as this one.
Text to be applied:
<p>
aaaaaaaaaaaaaaaa<br>
bbbbbbbbbbbbbbbb<br>
cccccccccccccccc<br>
</p>
After some research, I have:
[data-component="text-box"] p {
font-size:20px;
font-weight:700;
background-image:-webkit-linear-gradient(bottom,#9E9F9E,#ffffff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
However, as I applied the style on <p>, the color gradient effect is applied on the whole paragraph, instead of single characters/lines. (screenshot)
Is there any way to make it apply on single characters/lines, for each of them to have vertical color-gradient? (example)
Edit: Applying on either single character or single line will be fine, since I want vertical gradient. Vertical gradient for chars/lines are the same.
Here is the solution of the effect you want:
HTML
<p class="text-gradient">
TaihouKai
</p>
CSS
.text-gradient {
font-size: 20px;
font-weight: 700;
background-image: linear-gradient(to bottom, #9E9F9E, #ffffff);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
Explanation of background-clip CSS property (from MDN):
The background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box.
This property allows the background gradient, image or colour to be "cast" onto the characters themselves.
JS Fiddle Demo
UPDATE If you want to deal with multiple lines which are separated with line break <br />, you can use JavaScript to achieve:
revised JSFiddle demo
The most important part of your CSS gradient text is the actual CSS itself. Check out the basic form of the CSS.
h1 {
font-size: 72px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
You can pick any html DOM element and use color gradient font.
I'm trying to make a search bar that will look nice. What I did is, I made an image of an search bar and I'm adding the image to the back-ground of the input and I'm editing the place and the size that the font will appear.
The only thing that I can't find a way to edit is the small 'x' button that appears when I'm using input type search.
I want to move it a little bit left so it will fix my search bar image.
Here is my HTML:
<input id="search" name="Search" type="search" value="Search" />
Here is my CSS:
#search{
width: 480px;
height: 49px;
border: 3px solid black;
padding: 1px 0 0 48px;
font-size: 22px;
color: blue;
background-image: url('images/search.jpg');
background-repeat: no-repeat;
background-position: center;
outline: 0;
}
For anyone finding themselves here (as I did) thinking "how do I inspect this element to apply custom styles?", you'll need to enable the user agent shadow DOM to make these vendor elements accessible.
For WebKit (Safari) & Blink (Chrome,Edge,Opera,Brave) browsers, follow these steps:
Open DevTools (Ctrl+Shift+I)
Find the gear icon, top-right and click to open up the dropdown menu
In the context menu that opens, under "Preferences", find "Elements" towards the bottom and enable "Show user agent shadow DOM"
As you can see, I'm a man of culture, if there is a dark theme, I use it
Styling the "x" cancel search button in Webkit browsers
Assuming you're talking about "Cancel search" [X] icon that appeas in Webkit browsers only (Chrome, Safari, Opera) you can use -webkit-search-cancel-button pseudo-element. E.g:
#Search::-webkit-search-cancel-button{
position:relative;
right:20px;
}
Demo: http://jsfiddle.net/5XKrc/1/
Screenshot:
Using this approach you can even create your own cancel button, for example this style:
#Search::-webkit-search-cancel-button{
position:relative;
right:20px;
-webkit-appearance: none;
height: 20px;
width: 20px;
border-radius:10px;
background: red;
}
Instead of [X] will create a red circle.
Demo http://jsfiddle.net/5XKrc/3/
Screenshot:
For IE10 and above you can use following to move the button:
#Search::-ms-clear{
margin-right:20px
}
Oh and do use placeholder="Search" instead of value="Search" - it will display word "search" when input is empty - and will automatically remove it when user types something.
2022 Cross-browser consistent approach
Here is a cross-browser implementation of the Clear Search "x" button, It uses the solid times-circle SVG from FontAwesome for the icon and works for both dark and light backgrounds. It also standardizes Safari to adopt the Chrome implementation to only show the icon when the form field has focus.
input[type="search"] {
border: 1px solid gray;
padding: .2em .4em;
border-radius: .2em;
}
input[type="search"].dark {
background: #222;
color: #fff;
}
input[type="search"].light {
background: #fff;
color: #222;
}
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
height: 1em;
width: 1em;
border-radius: 50em;
background: url(https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg) no-repeat 50% 50%;
background-size: contain;
opacity: 0;
pointer-events: none;
}
input[type="search"]:focus::-webkit-search-cancel-button {
opacity: .3;
pointer-events: all;
}
input[type="search"].dark::-webkit-search-cancel-button {
filter: invert(1);
}
<input type="search" placeholder="search" class="light">
<input type="search" placeholder="search" class="dark">
NB 1. This S.O. question is explicitly about the clear button pseudo element, which is only supported in Webkit-based browsers (Edge, Safari, and Chrome). Currently (2022) Firefox supports the search clear button behind a feature flag only. Until Firefox releases this feature publicly, the only true cross-browser approach that supports Firefox is via a workaround that leverages HTML+CSS with an absolutely positioned <input type="reset"> to clear the entire form when clicked. See stackoverflow.com/a/37846330 Note that this workaround will clear all radio/checkbox selections and other fields if your search form has more than just a single search field.
NB 2. your mileage may vary in Edge, which is also Webkit–based. In my testing (via BrowserStack) some versions of Edge did not support setting a background-image: url() in the ::-webkit-search-cancel-button pseudo-class.
I want to move [the small 'x' icon] a little bit left so it will fix my search bar image.
Users expect things not to move much is UIs. If you decide to move the 'x' icon consider using pseudo-classes and move your search icon instead:
If the search icon is embedded your background image move it into a second image with role="presentation" attribute and place it immediately after your input in the markup:
<input id="search" name="Search" type="search" value="Search" />
<svg role="presentation" class="i-search" viewBox="0 0 32 32" width="14" height="14" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3">
<circle cx="14" cy="14" r="12" />
<path d="M23 23 L30 30" />
</svg>
Position it where the user expects:
#search + svg {
margin-left: -30px;
margin-bottom: -2px;
}
Then hide and show it using the :placeholder-shown pseudo-classes:
#search + svg {
visibility: hidden;
}
#search:placeholder-shown + svg {
visibility: visible;
}
You may style the 'x' icon if you wish. But you might not want to anymore.
Does a simple "X" with a dark or light backdrop using a single block of CSS rules. Run code snippet to see example.
/* light backdrops only */
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
display: inline-block;
width: 12px;
height: 12px;
margin-left: 10px;
background:
linear-gradient(45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,#000 45%,#000 55%,rgba(0,0,0,0) 57%,rgba(0,0,0,0) 100%),
linear-gradient(135deg, transparent 0%,transparent 43%,#000 45%,#000 55%,transparent 57%,transparent 100%);
}
/* dark backdrops only */
input[type="search"][value="dark"]::-webkit-search-cancel-button {
background:
linear-gradient(45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,#fff 45%,#fff 55%,rgba(0,0,0,0) 57%,rgba(0,0,0,0) 100%),
linear-gradient(135deg, transparent 0%,transparent 43%,#fff 45%,#fff 55%,transparent 57%,transparent 100%);
}
<input type="search" value="light">
<input type="search" value="dark" style="background:black; color:white;">
Ref: https://stackoverflow.com/a/52141879/8762323
#input[type="search"]::-webkit-search-cancel-button {
// Using the two lines below will allow you to insert a image
-webkit-appearance: none;
-webkit-user-modify: read-write !important;
height: 28px;
content: url("clear button.png");
Just to highlight better how to figure out such kinds of things by ourselves. As shown and mentioned in #UncaughtTypeError answer above
https://stackoverflow.com/a/58484957/7668448
Also in the last section I do go to show how to do different things including changing the color. And with examples.
I loved the answer because it was teaching us how to fish rather than here is the fish
I want to clarify that further for others. Who may didn't notice.
By enabling the show user agent shadow dom in elements section of preferences in devtools.
Now you'll be able to access the shadow dom that is created by the agent (browser engine or browser shortly). In dev tools.
Get to know how to select the element
You can manipulate and experiment faster through the dev-tool. And figuring out properties and default values and what doesn't work. (example at the end)
What is shadow dom?
From Mozilla doc Using_shadow_DOM
An important aspect of web components is encapsulation — being able to keep the markup structure, style, and behavior hidden and separate from other code on the page so that different parts do not clash, and the code can be kept nice and clean. The Shadow DOM API is a key part of this, providing a way to attach a hidden separated DOM to an element. This article covers the basics of using the Shadow DOM.
You can learn more about it. On the link above.
How to figure out how you would refer to those hidden elements
After enabling showing the agent shadow dom. Now you can see those hidden dom elements.
Select the element. And check the Styles corresponding selector. As shown by the red box in the illustration above.
input[type="search" i]::-webkit-search-cancel-button {
}
And that's it.
Can test an example below:
https://codepen.io/mohamedlamineallal/pen/JjZmdPv
See before enabling and after enabling the agent dom shadow.
And for demonstration purposes. You can see, I changed the color using filter, resize the button with padding, and repositioned it with margin-right.
Elements around manipulating the clear button
A great deal with this method is that now you can use the Dev-tool to experiment faster. That includes figuring out what doesn't work at a better speed. Example mask-image with background-color. Or pseudo-element .before.
Things we can figure out:
to position, we have to use margin-right
resize the clear button with padding
To show and hide we got to use opacity
appearance can allow us to hide the default behavior fully. [If we want to disable the default button. We can use appearance: none; (default: appearance: auto;)]
We can see all the default settings
To replace the button, use background-image with URL no-repeat and center. Also, set the height and width
... that at a fast glimpse.
Otherwise, if you want to just change the color, you can with using a filter with (invert, sepia, saturate, hue, brightness, contrast) as in
filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
(code pen)
You can use the calculator here: 1, 2
You can see the details of that method here (SO answer)
or also the svg filters method (SO answer) which I guess it's more ideal (why in the SO answer [link]).
filter: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg">\
<filter id="recolor" color-interpolation-filters="sRGB">\
<feColorMatrix type="matrix" values="\
0 0 0 0 R\
0 0 0 0 G\
0 0 0 0 B\
0 0 0 A 0\
"/>\
</filter>\
</svg>\
#recolor');
read the answer (link).
Reimplement all
And surely if the desired output is more complex. Simply disabling the default behavior and re-implement it fully would be more clean and easy and faster.
Using appearance: none; will hide and disable the default behavior.
input[type="search" i]::-webkit-search-cancel-button {
appearance: none;
}
You can use position: absolute; on a span element to keep the input behavior as outline on focus (can use padding-right for not letting text overflow below the button) and you can also use CSS URL for background-image (SVG icons, you can have utf8 inline encoded SVG where you can change the color, including dynamically if needed) ...
[take keywords, if they make sense check them]
Absolutely: don't use pseudo-element :after. You can't add a js event listener to it. Using a span is cleaner and faster.
Here are some examples:
Using span with absolute position
Using :after pseudo-element and using the event-pointer workaround. (event bubbling make it possible) (you can read the comment in the playground)
The :after example demonstrate. Using a flex-box system. Hidding input outline and border. And re-implementing them. Could have used that in the span example. use outline: none; to disable the default outline.
I advise always to use the dom el (span) way.
I'm not sure is this what you were looking for, but you can style your search bar like this
fiddle
HTML
<div id="input">
<input type="text" id="tb" />
<a id="close" href="#"><img src="http://www.ecoweb.info/sites/default/files/tips-close.png"></a>
</div>
CSS
#tb
{
border:none;
}
#input
{
padding:0px;
border: 1px solid #999;
width:150px;
}
#close
{
float:right;
}
How can I remove the blue glow that surrounds a selected text input box using pure CSS?
This should do it:
input:focus {
outline:none;
}
EDIT (2015): If you are designing for a wide audience, recall that the outline is often a critical accessibility feature for users who navigate via keyboards or require more apparent visual feedback. If you remove the outline, make sure to define an alternative focus state that provides appropriate visual feedback to your users.
I prefer a nice solid reset like:
input, textarea, select, a { outline: none; }
Outline 'none' on anchor tags prevents horrible focus outlines on many Android browsers.
if you are using bootstrap then you have to add box-shadow: none
input:focus {
outline:none;
box-shadow: none;
}
I mean: when you select some HTML text there is a color in the background which tells you which text you've selected. How is it possible thru CSS to change it? I need it to be white, transparent. I have seen this done.
You can use certain CSS selectors to change CSS properties on selected text. (I tested this and it worked in Firefox, Safari, Chrome, and even Konqueror, but not IE). Example:
*::selection {
background: #cc0000;
color: #ffffff;
}
*::-moz-selection {
background: #cc0000;
color: #ffffff;
}
*::-webkit-selection {
background: #cc0000;
color: #ffffff;
}
You have to specify each selector separately or else it doesn't work (I guess the CSS parser stops processing a selector if it encounters an error). This changes the background color of the selected text to dark red and the color to white (and any other CSS you want to change). This doesn't have great cross-browser support (doesn't work in IE, and probably not Opera, either), but I think it is the only solution possible without some kind of complicated, buggy JavaScript script.
More info: http://www.quirksmode.org/css/selection.html
What is the difference to use {text-decoration: underline} and {border-bottom: ...}?
which is easy to style and cross browser compatible?
when we should use border-bottom over text-decoration: underline?
Would it be good to use border-bottom always in place of text-decoration: underline?
border-bottom puts a line at the bottom of the element box. text-decoration:underline renders the text underlined. The exact difference depends on the HTML and text layout engines in use, but in general if you want text underlined, then underline it.
Sorry to say this, but some answers here are misleading. Splitting a line of text does not place the border at the bottom of the entire block, because of the nature of inline blocks. Borders under links are actually more consistent across browsers than text-decoration: underline.
See: Text-Decoration vs. Border-Bottom
As Ignacio said, border-bottom will put the line at the bottom of the containing box, whereas text-decoration:underline will actually underline the text. This becomes an important distinction for multi-line strings.
I am a single line and will look similar for both methods
---------------------------------------------------------
would probably render the same for both styles, but you'll get the following for multi-line strings.
I am a string that has been
split and added a border-bottom
-------------------------------
I am a string that has been
---------------------------
split and underlined
--------------------
Apologies for using code formatting rather than properly rending these examples, but you can see the point I'm trying to make.
bottom-border lets you control the distance between the text and the underline, so its more versatile. And (as mentioned above) it allows a different color for the underline (although I don't see a reason why you'll want to do that).
text-decoration is more 'correct' because it is the 'real' CSS property meant for underlining text.
if you set text-decoration: underline for all links then you will have to set text-decoration: none for special links which you don't need an underline. but if you use border-bottom instead, you'll save one line of CSS code (provide you set text-decoration: none in your reset CSS.
so all in all, i'll vote for border-bottom if you have a complex layout with different styles for each link but text-decoration for a simple website coded 'by the book'.
While there are always going to be cases where one is more appropriate than the other, border-bottom offers much more precise control over text-decoration and is therefore probably the preferred method. Here's a quick (likely not exhaustive) list of properties that border-bottom can control/enable that text-decoration cannot:
Spacing between text and "underline"
"Underline" style (dotted, dashed, solid, gradient, image)
Thickness
CSS transitions/animations
Separation of color between text and "underline"
In many cases, most of these abilities will not be needed - but it is good to have them available! I've switched to using border-bottom primarily for the ability to put a few pixels of padding between the text and the underline; the next most common use I've found is divorcing the underline color from the text color.
With CSS variables now shipping in every major browser, a "reset" stylesheet might look something like this:
:root {
--link-color: blue;
--hover-color: purple;
--underline-color: var(--link-color);
}
a {
color: var(--link-color);
text-decoration: none;
border-bottom: 1px solid var(--underline-color);
}
a:hover {
color: var(--hover-color);
border-bottom-color: var(--hover-color);
}
This way, links will display as expected on a "default" basis, yet still allow for customization as needed.
setting your text to display inline (actually, it should be that by default) will cause the border-bottom to render much as a text-decoration rule.
however, i presume that you want to use this technique on links by doing the following:
/* my super eye catching dual colour link */
a {
color:black;
border-bottom:1px solid red;
}
which is all well and good, but you'll find that wherever you have an img tag inside a link, the image will have a red border under it.
if you can figure out a way to target the parent of a page element (the image) using existing selectors and no javascript, i'll buy you a beer but i don't think you'll have much luck.
using "text-decoration" avoids this issue altogether as an image is clearly not text, it will not render an underline when inside a link.
if you have complete control over your markup, i suppose you can bumble your way through by adding classes to every link, but if you're working with any popular CMS system, you're going to struggle with this idea.
Try this border with 1px image
a:hover {
background: url("img/bg-link-hover.png") repeat-x scroll 0px 92% transparent;
background-color: transparent;
background-image: url("img/bg-link-hover.png");
background-repeat: repeat-x;
background-attachment: scroll;
background-position: 0px 92%;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
}