I have recently updated chrome from version 39 to version 43.0.2357.132. Before updation the following piece of code was working just fine:
::-webkit-input-placeholder {
color: red;
}
But after updating its not working. I also tried:
input::-webkit-input-placeholder {
color: red;
}
But no luck! Any help would be appreciated. Thanks in advance!
Have you tried something like this?
Code snippets:
::i-block-chrome,
input[placeholder]::-webkit-input-placeholder {
color: red;
}
Hope this helps!!!
I had a very similar issue in my application where I could not get placeholder colors to work in Chrome, not even in 2018. All demos worked just fine for me, it just failed in my application despite following all regular advise, such as splitting declarations.
To make a long story short, this completely unrelated declaration in my stylesheet was causing placeholder colors to fail in Chrome:
input:first-line {
display: inline-block;
}
The above is a fairly common hack to harmonize line height inside input elements across browsers. You may find it in some frameworks.
Well, using it prevents you from setting custom colors for placeholders in Chrome. Does that make sense? No. But it solved it for me.
Related
So I've been fighting with this for maybe a week off and on and every time I end up eventually giving up. There's a "search bar" input at the top right of this website I'm working on here. There's lots of information on text-aligning the placeholder text for inputs like this right here on StackOverflow and I've built out lots of these without ever having an issue with this. But for some reason on this site, I can't just apply something like 'text-align: left;', the text remains centered. I know this is a dumb question but I'm really confused on what's causing this. I can't seem to recreate this in a CodePen at all, it always behaves as expected everywhere except for on this production site.
Does anyone know why this specific input seems to not respond to "text-align: left;"? I'm using Chrome but every browser I've tested displays this the same way - centered placeholder text no matter what I do. I think I'm missing something simple here but I don't have a clue what it is.
That is not text. That is placeholder.
please add below to css
input.form-control.search::placeholder {
float: left;
}
I've looked into the code and I honestly have no idea what is causing this but I have a solution :)
<style>
.search::-webkit-input-placeholder{
text-align: left !important;
}
</style>
Set the important tag to tell the browser that that thingie maginie is important and set the property to the placeholder of the '.search'
Probably, he know what is a placeholder. The problem is text-align: center from your placeholder. If you want to see it with developer tools:
The trick is to enable 'Show user agent shadow DOM' in the Settings
panel of Chrome Developer Tools. Thank to Sean Anderson for the
answer
Also you can edit your placeholder using vendor-prefixed selectors
There is a setting in the style.css file:
.header-main .search-wrapper .search::-webkit-input-placeholder {
text-align: center;
}
It's got quite a high specificity so worth copying the lot and simply doing:
.header-main .search-wrapper .search::-webkit-input-placeholder {
text-align: left;
}
This is a learning exercise for me, so thanks in advance for not telling me why I don't want to do to the following. I don't want to do, I want to understand.
Given the following CSS:
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
input[type="checkbox"]:focus {
outline: none;
}
The specificity for both shows as 0,2,1, and everything I read about CSS says the second style should override the first as it comes last. If I get more specific about the second style, it wins. But as posted, Chrome doesn't display the outline, but IE11 and FF28 do. This seems to me to be such a fundamentally simple application of CSS. Does anyone have any insight into what the underlying issue is, so that I can pull it into my thinking as I'm developing stylesheets?
EDIT: Chrome also doesn't display the outline if I delete the second style. In Chrome, the outline: thin dotted are overridden by the following outline line. So it appears that per the spec, Chrome is playing by the book and FF and IE don't? Could it be a union vs. override difference in how browsers interpret CSS?
With apologies, the error was mine. When I switched from bootstrap.min.css to bootstrap.less, I didn't remove the former from loading so it was loaded last and overrode my Site.less -> site.css. I figured it out after I tried to create a fiddle, which I should have done in the first place. Feel free to down-mod this post to hell in the way that it deserves.
I have really simple HTML code
<img class='star' src='' alt='★'/>
With really simple style
.star {
position: absolute;
cursor: pointer;
font-size: 40px;
color: black;
}
.star:hover {
color:red;
}
My idia is this. If there is no image on server, I show unicode star symbol ( or if user will switch off all images ). And if a user
It works perfectly in FF ( tested on FF25 ) but fails really hard on WebKit browsers. Hover state dosn't trigger or triggers ones and then stay in that state forever.
I have only one question.. WTF is that? o_O Where am I wrong, or it's just a WebKit bug?
It would be nice if someone told me how to fix this. But mostly i want to understand what is going on here.
PS: Example http://jsbin.com/UMIrAJI/3/edit
UPD:
This example is working http://jsbin.com/UMIrAJI/5/edit but the only difference is 'background' color changed on hover. As soon as we remove 'background' - hover stops working. LOL.
So my question is still valid. What is going on here?
UPD2:
I found another workaround. If we add border: 0px solid white; (but only on hover) example will also start to work http://jsbin.com/UMIrAJI/6/edit . So it's something about repainting.
UPD3:
It looks like a bug to me so I reported it. I'll wait for some comments from developers.
https://code.google.com/p/chromium/issues/detail?id=323545&thanks=323545&ts=1385479799
Instead of alt, which should describe the content of the image, for browsers without image support and for accessibility tools, use the title property
<img class='star' src='' title='★'/>
I would like to make tinymce work in my CMS with IE but i stumbled over the following problem:
When i click into the editor i get a very ugly box which makes users unhappy.
It is not possible to select more than one paragraph.
I am sure there is a workaround or init setting for this.
Can anyone help me?
I found out the reason for this problem. It was a css setting:
p {
min-height : 18px;
}
After removal everything worked fine.
Edit: The following css setting had the same unwanted effect:
p {
width : 250px;
}
Helpfull link concerning the problem: http://www.satzansatz.de/cssd/onhavinglayout.html
So i have some html:
<a class='clicktext'>...read more!</a>
and i want to give it a :hover animation, as so:
.clicktext{
}
.clicktext:hover{
text-decoration:underline;
}
.clicktext:active{
text-decoration:none;
}
Suffice to say, it does not work in Mozilla Firefox 5, even though it works perfectly well in Chrome and Safari. However, if i change it to
a{
}
a:hover{
text-decoration:underline;
}
a:active{
text-decoration:none;
}
It works perfectly fine in Mozilla Firefox 5! I have not managed to find anything regarding this online.
I could, of course, just change my styles to apply to the a rather than the .clicktext. The problem with that is that it would screw up my conventions, which is (as far as possible) apply all the styles to classes rather than to the tag names. After all, I have many other tags for which i do not want this underline-on-hover thing to appear.
Has anyone bumped into this, and perhaps found a nice solution?
edit: these also do not work
.clicktext a:hover{...}
a .clicktext:hover{...}
I had these kind of problems with Firefox and solved it by adding the tag name to class name:
for example I had this which worked in Chrome but not in Firefox:
.content .sidebar:hover{
background-color: red;
}
and fixed it by making it more specific like this:
div.content div.sidebar:hover{
background-color: red;
}
http://jsfiddle.net/rE8xU/
I do not see the issue, when moused over it does include an underline.
A possible cause of this issue is the level of importance that the class has.
Such as styles that are set by their identification tag will take over any class styles and so forth.
http://htmlhelp.com/reference/css/structure.html
check out cascading order
Lastly, make sure that the css file is properly linked and or embedded
you can use firefox to check as well.
You need to add href="#" to your . the :hover meta tag needs the link to have the href property set.
use <p></p> tag if you are not hyperlinking the text.
<p class='clicktext'>...read more!</p>
then for styling the text.
p.clicktext {
color: #ccc;
}
p.clicktext:hover {
text-decoration:underline;
}
Hope i Helped ;)
There's a big chance that you have a conflict somewhere in your CSS, because the jsfiddle with this exact code works fine in Firefox 5. You might want to check for ID-selectors with the hover-pseudoclass that could possibly overrule this line of styling. Inspect it with firebug to see what css is inherited.
You might be getting this problem for
1: not specifying the class which is clicktext in your case, or.
2: object a is associated with some other class not compatible with clicktext class!
I am saying this because my website
is running perfectly without any problem, in both Chrome and Firefox!
I am using hover to produce an overlay effect! This is what I am doing:
.container{
//your specifications
}
.image{
//your specifications
}
.text{
//your specifications
}
.container:hover .text{
//your specifications
}
I also think that the answer marked as "correct answer" is not correct.
I had same problem, was just not working on Firefox, quick close and restart app and was working again.
Daniel