I want my input element had different colors for text and for caret.
I'm already found a solution for webkit browsers:
input {
color: black;
-webkit-text-fill-color: red;
}
But still, I wonder how can I make it for other browsers.
Eventually, I want to have transparent text color and black caret, if it matters.
Related
I've noticed something odd about the way Chrome and Edge render text-shadows on hyperlinks.
For example, I have a situation where I apply two text-shadows to several paragraph elements. One of these paragraphs is only a standard hyperlink with text-decoration: underline;. Here's the HTML and CSS:
<p class="header__text">
See the 2021 edition ...
</p>
.header__text {
color: #fff;
text-shadow: 2px 2px 2px #000, 1px 1px 24px #000;
padding-left: 16px;
padding-right: 16px;
}
a {
color: #c62828;
}
This renders the way I would expect in Safari and Firefox (Mac and PC), with the shadow completely underneath the text and the underline.
But in Chrome (Mac and PC) and Edge, the text-shadow falls under the text, but over the hyperlink's underline.
I don't understand why the shadow behaves like this in those two browsers. Is this just a bug? Is there some Blink-specific property I should override to stop this behavior?
From my reading the underline should be the first to be drawn. That is underneath what comes next which seems to be text-shadow if my reading is correct.
From https://drafts.csswg.org/css-text-decor/#painting-order the painting order is:
As in [CSS2], text decorations are drawn immediately over/under the text they decorate, in the
following order (bottommost first):
shadows (text-shadow)
underlines (text-decoration)
overlines (text-decoration)
text
emphasis marks (text-emphasis)
line-through (text-decoration)
That is, it seems as though the shadows should be overlaid by the underline but that Chrome (Edge) do not follow this.
Perhaps a stupid question:
Here is a screenshot of my login page with a text-input field where I set the background-color. In the developer tools the background color property shows up as red, but in the page it is still grey. Any ideas on how to change it to red?
edit: under computed it says:
edit:
this issue might be related to the chromium browser. On Chrome the background color is red
As you can see
there is -internal-autofill-selected in computed tab
These are browser's default styles
Perhaps you should do to override it
#id_username,
input#id_username:-internal-autofill-selected {
background-color: red !important;
color: #fff !important;
}
Could you try this
input:-webkit-autofill {
background-color: transparent;
}
How do i change the color of X that appears on input[type=search]
By using webkit-search-cancel-button and webkit-appearance: none i have been able to change it to a colored square or circle but i have been unable to change the color of X.
The issue is default color of the X on safari is black and by textbox is black hence this is not visible. Chrome picks a safe color of grey but it too has the same issue.
You probably don't need the solution anymore, but I will just it leave here to see if it helps anyone.
You can't change the color of the clear button (x) directly (as far as I tried), but here's some trick I figured out to change the button appearance.
Basically, I just removed the default clear button and replaced it with a black clear button image (I used base64 encoded image here, you can use any).
[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
height: 10px;
width: 10px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjEyMy4wNXB4IiBoZWlnaHQ9IjEyMy4wNXB4IiB2aWV3Qm94PSIwIDAgMTIzLjA1IDEyMy4wNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTIzLjA1IDEyMy4wNTsiDQoJIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZD0iTTEyMS4zMjUsMTAuOTI1bC04LjUtOC4zOTljLTIuMy0yLjMtNi4xLTIuMy04LjUsMGwtNDIuNCw0Mi4zOTlMMTguNzI2LDEuNzI2Yy0yLjMwMS0yLjMwMS02LjEwMS0yLjMwMS04LjUsMGwtOC41LDguNQ0KCQljLTIuMzAxLDIuMy0yLjMwMSw2LjEsMCw4LjVsNDMuMSw0My4xbC00Mi4zLDQyLjVjLTIuMywyLjMtMi4zLDYuMSwwLDguNWw4LjUsOC41YzIuMywyLjMsNi4xLDIuMyw4LjUsMGw0Mi4zOTktNDIuNGw0Mi40LDQyLjQNCgkJYzIuMywyLjMsNi4xLDIuMyw4LjUsMGw4LjUtOC41YzIuMy0yLjMsMi4zLTYuMSwwLTguNWwtNDIuNS00Mi40bDQyLjQtNDIuMzk5QzEyMy42MjUsMTcuMTI1LDEyMy42MjUsMTMuMzI1LDEyMS4zMjUsMTAuOTI1eiIvPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=);
background-size: 10px 10px;
}
<input type="search">
I could't find a way to change only the color but you can overwrite the "x" button style with:
input[type="search"]::-webkit-search-cancel-button {
/* Remove default */
-webkit-appearance: none;
/*Your new styles */
height: 10px;
width: 10px;
background: red;
}
For now this is supported by Webkit browsers(Chrome, Safari).
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-search-cancel-button
A workaround for changing the color is using filter. In my case, I simply wanted the x to be black or gray (instead of blue), so I used a black and white filter
You could use an invert filter to make the x light on a dark background.
I want a css button with border-radius, but I want this border to be well contoured.
when I put mouse hover this button there is a kind of fog in borders:
.b_b{
cursor : pointer;
padding:6px;
font-size : 10pt;
font-weight : bold;
color : #2e9fff;
text-decoration : none;
border:1px solid #cce9ff;
background:#fff;
border-radius:9px;
z-index:999px;
}
.b_b:hover{
background-color:#2e9fff;
color:#fff;
}
<span class=b_b>button</span>
https://jsfiddle.net/42fmsj20/
what is wrong?
You can simply use the background-clip property to achieve this. For an in-depth description on how that property works you can check out the W3Schools example and explanation here.
CSS:
-webkit-background-clip: padding; /* Safari 4+, Chrome 6+ */
-moz-background-clip: padding; /* Firefox 3.6+ */
background-clip: padding-box; /* Firefox 4+, Safari 3+, Opera 10.5+, IE9+ */
JSFiddle
I also noticed the you had forgot to put double quotes "" around your class value, make sure you always include those as they are required for valid syntax.
<span class="b_b">button</span>
Example:
https://jsfiddle.net/2zbu8btx/
`<span>` tag is used to determine the line elements of the document
add display: inline-block; for span
In fact, an element in its effect similar to recessed elements (such as tag <img>). At the same time its interior is formatted as a block element, and the element itself - as built.
https://jsfiddle.net/mgcLbo92/
.b_b{
cursor : pointer;
display: inline-block;
padding:16px 50px;
font-size : 10pt;
font-weight : bold;
color : #2e9fff;
text-decoration : none;
border:1px solid #cce9ff;
background:#fff;
border-radius:9px;
z-index:999px;
}
.b_b:hover{
background:#2e9fff;
color:#fff;
}
<span class=b_b>button</span>
The problem is half aesthetical and half a matter of antialiasing.
When you put darker border around lighter element and then, on hover state, invert it to lighter border around darker element, you'll end in unpleasant effect like this, it will just look like the border is some kind of gradient on edges of the element. Your eye will not consider it as a border anymore since it does not delimit the area of element from the outer space.
Try adding darker border to hover state, you'll get rid of foggy effect and it will look nicer.
See updated version: https://jsfiddle.net/bd2h2h8b/
.b_b:hover{
background-color:#2e9fff;
color:#fff;
border-color: #1e6fCf;
}
I have a nice background on my page, and I want my text header to act as a mask to cut through its containing div and have the background as a texture.
Can I do this in CSS or do I have to open up Photoshop?
Limited browser support, but background-clip can get you this effect: http://tympanus.net/Tutorials/ExperimentsBackgroundClipText/ (Hit the Animate buttons for more fun)
Using SVG you can do it like this: http://people.opera.com/dstorey/images/newyorkmaskexample.svg (View source to see what is actually done, see reference article too)
Using a background image and then CSS, you could do this: http://www.netmagazine.com/tutorials/texturise-web-type-css
As CSS-Tricks shows in this article, 'image behind text' can be done as such:
h1 {
color: white; /* Fallback: assume this color ON TOP of image */
background: url(images/fire.jpg) no-repeat; /* Set the backround image */
-webkit-background-clip: text; /* clip the background to the text inside the tag*/
-webkit-text-fill-color: transparent; /* make the text transparent so
* the background shows through*/
}
But it isn't guaranteed to work on all browsers, so they suggest a few work arounds, like modernizr.
Here's what it looks like when it works:
There is a background-clip: text property in CSS3, although it doesn't work in every browser. See here for more details.
To extend #sgress454's answer. Nowadays, background-clip: text works in Firefox and Edge, but its browser compatibility is still not full. Safari does not and Chrome partially (It is supported with the prefixed version of the property only. According to the WebKit blog, text decorations or shadows are not included in the clipping.). background-clip: text is still what you are looking for:
background-clip: text;
The background is painted within (clipped to) the foreground text.
MDN
Demo:
body {background: black;}
div {
background: url(https://images.unsplash.com/photo-1543005472-1b1d37fa4eae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60), black;
background-clip: text;
color: transparent;
}
<div>This background clips to the text.</div>