<style type="text/css"> span:hover { } span[title]:hover:after { color: yellow; } </style> <span title ="this is text"> Testing </span>
In the browser I am using (Google Chrome), the code above displays two tooltips, one that looks like expanded text, and one that seems to be generated by the browser. How do I fix this so that there is only one tooltip showing when I scroll over the word "Testing"? I want to keep the yellow one.
You can't change the appearance of the tooltip since its browser-dependent.
However if you want to style your tooltips, you can use JS libraries like JS Toolip.
Related
I'm trying to make a dark theme via css for Tiktok's Chrome site and I'm having some trouble making the like button visable on the black background.
i tried using Filter:invert(1); and that worked but when you like the comment the red color is now teal.
tiktok doesn't use different divs for the different imgs so when i filter the black heart it filters the red one too. all tiktok does is switch the image links in the src. i want to specify the black img link in css to isolate it so i can filter that one and that one only.
This is the HTML of the red like button.
<img src="https://sf16-scmcdn-va.ibytedtos.com/goofy/tiktok/web/node/_next/static/images/liked-c7cae6d877d0cceec83f13891a4a8836.svg" class="jsx-1998704864 icon">
This is the one i want to isolate in css.
<img src="https://sf16-scmcdn-va.ibytedtos.com/goofy/tiktok/web/node/_next/static/images/unlike-c0928a8c3ac7b448ef79c4bb26aec869.svg" class="jsx-1998704864 icon">
This is what i have in my css
.like-container.jsx-1998704864 .icon.jsx-1998704864{
filter:invert(1);
}
Since you're not able to use JavaScript, your best option is to use attribute selectors. Please note that the source is probably very likely to change, since those classnames for example seem to be auto generated by some compiler. Same goes for the image URL.
To select the unlike button use
img[src="https://sf16-scmcdn-va.ibytedtos.com/goofy/tiktok/web/node/_next/static/images/unlike-c0928a8c3ac7b448ef79c4bb26aec869.svg"] {
/* your unlike button style */
}
For the like button use
img[src="https://sf16-scmcdn-va.ibytedtos.com/goofy/tiktok/web/node/_next/static/images/liked-c7cae6d877d0cceec83f13891a4a8836.svg"] {
/* your unlike button style */
}
EDIT (after 15 mins):
If you want to select any image tag which contains the word "unlike" you can also use this:
img[src*="unlike"] {
/* your unlike button style */
}
I have an HTML webpage with both English and Portuguese languages, that are swapped when I press a flag at the top of the page. This is done through a class in a span. Typical usage:
<div>
<span class="por1">Portuguese text 1</span>
<span class="eng1">English text 2</span>
Some text 3 that is correct in both languages
</div>
By default, I have in CSS (English is the default language):
.por1 { display: none }
.eng1 { display: inline-block }
When I press the flag, the languages are swapped using obvious javascript.
This works perfect in a desktop, no errors in W3C, but in mobile devices (only) the texts 1 and 2 inside both spans is smaller than text 3. I erased all the #media, and the thing still gives problems.
However, if I erase the two CSS lines .por1 and .eng1 above, of course both texts 1 and 2 appear simultaneously, but now with the correct size. Hence, it seems to have something to do with the display tag...?
Hence, the behaviour is as I have two spans .por1 and .eng1 CSS for mobile devices, but I have not. In fact, debugging the page in Chrome shows that the two spans have no special formatting.
This is the page. Take a look at it in a smartphone and you will see two different sizes in the title already.
EDIT I simplified the page to the maximum. Look at the page now, whose complete code is this, including CSS:
<!DOCTYPE html>
<html>
<head>
<title>Crazy</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
body { font-size: 24px; }
.por1 { display: none }
.eng1 { display: inline-block }
h2 { font-size: 2em; }
h3 { font-size: 1.7em; }
</style>
</head>
<body>
<h2> <span class="por1">Borboletas e Mariposas</span><span class="eng1">Butterflies and Moths</span> <br> (Rhopalocera, Heterocera) </h2>
<h3> oplus <span class="por1">Borboletas </span><span class="eng1">Butterflies </span> (Papilionoidea) </h3>
<div class="inner"><span class="por1">asa-de-vidro </span><span class="eng1">Glasswing </span> (Greta sp.)</div>
<div class="inner"><span class="por1">mariposa-walker</span><span class="eng1">Walker's moth</span> (Lepidoptera, Erebidae: Sosxetra grata)</div>
<div class="inner"><span class="por1">mariposa </span><span class="eng1">herilia moth </span> (Erebidae: Letis sp. (herilia?))</div>
</body></html>
If I remove the fist <div class="inner">, the page is still rendered with crazy font sizes. But if I remove the second, or the third, the page is rendered correctly (??!!). In fact, if I remove (herilia?) from the third <div class="inner">, it is also rendered correctly!! Actually, if I remove the ? it is also rendered correctly. Same happens if I remove the oplus. No idea what is happening!
EDIT 2
Screenshot of the wrong rendering:
Screenshot of the correct rendering (same HTML code with the (herilia?) removed):
EDIT 3 If I change h3 { font-size: 1.7em; } to h3 { font-size: 1.5em; }, the problem is gone!
I think you are experiencing a problem that I experiment in the past. It's the autoadjusting of the font size setted by webkit mobile browsers.
I usually use this trick to avoid autosizing
div { max-height: 9999px; }
You can apply to the div or the spans, try and tell me what is the result.
Edit
You need to make this kind of tricks too avoid the effect. The problem seems to be something about the bad viewport configuration and texts below 18 pixels. The browser thinks that is a text that the user can't read and apply autosizing to allow user to read it.
Try to specify the font-size for your span tags
If I understand you well, you know you can play with the font size in CSS, but you don't want to, as I understood from one of your comments.
I suggest controlling the font size through javascript dynamically to fit your multiple contexts, if you need any help with that just let us know.
My main issue is that my CSS does not load with the elements. I'm placing my CSS/HTML insde the HTML boxes as a lot of styling is not allowed directly in the HTML. There are a bunch of other frustrating things with Google Sites but this is what I need help with right now.
I'll navigate/refresh my page and all of my elements will display without CSS. Then after a few seconds the CSS is applied and things look how I want.
How do I get the CSS to load correctly? I can't have my menus and object load looking all crazy.
Here is a random example of code that does this (anything I've put into these boxes does this)
<style type="text/css">
span
{
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
</style>
<p>
<span>T</span>he first letter in ths paragraph is styled
with CSS to be 400% larger than the rest of the text.
</p>
UPDATE: I've spoken with a Google Apps rep and they opened a ticket as the css not loading is a bug. No word on the time frame but they are working on it.
I have the same problem and a workaround can be
<style type="text/css">
.show-on-load {
display: block !important;
}
span
{
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
</style>
<p class="show-on-load" style="display: none;">
<span>T</span>he first letter in ths paragraph is styled
with CSS to be 400% larger than the rest of the text.
</p>
This way the content doesn't display until the CSS is loaded. Unfortunately, I can't use this workaround myself because I have to support IE8 and style tags don't load at all there.
Edit: use opacity instead so IE8 is supported
I'm considering starting to use this technic of icons as fonts, as it seems pretty awesome. But I can't seem to figure out how make it change colors on hover of the link. Here is a jsfiddle for you to play with:
http://jsfiddle.net/eNhUf/17/
As you will see, when you hover a text like "caution", the text goes to BLUE, and I would also like the icon/font to go to blue as well.
Does anybody know how to do this?
Thanks.
.caution.icon:hover:before{content:"\0021";color:green }
This will make caution icon go green when you hover the link, I'm sure you can customize the idea as you like! http://jsfiddle.net/agentmilindu/eNhUf/24/
Font icon libraries usually use pre-generated content to inject the icon into the element. This means that you need to target that area and set the color.
<p class="icon caution email">Email</p>
<style type="text/css">
.icon.caution, .icon.caution:before { color:blue; }
</style>
Try this:
.icon:hover, .icon:hover:before { color: blue; }
I'd like to know how to do something like this in CSS:
How is it possible to change the text color halfway through like that on an <input> tag ? I've done a View Source already, but it's hard to make sense of.
Google uses two divs which are absolutely positioned on top of the input box. The first div contains the word stackoverflow, and the text is styled in a light gray. The second dvi contains "stacko" and the text is black.
If you inspect the source, look for divs with class="gsfi".
First off, look into implementing autocompletion. This should give you another element [beneath the one the user types; probably another div] for styling.
its not purely a CSS thing, you need JS too.
Have a look at this autocomplete demo: http://www.pengoworks.com/workshop/jquery/autocomplete.htm
Now you could use CSS for styling text selections in that input to gray the text out.
like this:
::selection {
color: white;
background-color: red;
}
::-moz-selection {
color: white;
background-color: red;
}