I have a problem regarding symbol https://www.htmlsymbols.xyz/unicode/U+1F861
:after{
content: "\01F861";
}
Every browser displays normally this element except IE.
Does anyone know workaround with it?
I have checked your code, it will display a square in IE browser, it means the font used does not have the glyph for that character.
As a workaround, try to use the CSS Entities. Please check the following sample:
<style>
.ribbon {
background-color: #5BC8F7;
}
.ribbon::after {
content: " \2191";
background-color: #FFBA10;
}
</style>
<span class="ribbon">Look at the orange box after this text. </span>
The result in IE browser as below:
Related
I want to visually replace parts of a string, but when I select/copy the string the original text should be copied.
I came across this answer https://stackoverflow.com/a/67356640/6567275 and CSS content seemed perfect for this, but it doesn't stick.
[data-replace] {
content: attr(data-replace);
background: yellow;
}
.replace {
content: "test";
background: orange;
}
.replace-with-image {
content: url("//cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico");
background: green;
}
<p>
foo <span data-replace="test">bar</span> baz.<br>
foo <span class="replace">bar</span> baz.<br>
foo <span class="replace-with-image">bar</span> baz.<br>
</p>
This should show "foo test baz." on the screen, <br>
but when I select/copy it it should copy as "foo bar baz."
I know ::before and ::after, but that's not what I'm talking about. According to MDN the CSS content property applies to "All elements, tree-abiding pseudo-elements, and page margin boxes" and according to caniuse this feature is available for several years across browsers.
I tried it in Chrome, Opera, Firefox and Edge.
Do I misunderstand something? Or am I doing something wrong?
Why doesn't this work?
Edit: replace element content with an image works :D
I have a paragraph on my page:
<p class='errorMessage'></p>
It has css property
.errorMessage
{
color: red;
}
That works fine in chrome and safari but text is still black in IE and Firefox. How can I solve this problem?
Try to use
.errorMessage{
color:red !important;
}
If this works, another css style overrides your rule. Otherwise there must be something wrong with the document (i.e. incorrect style tags,...).
I've been trying to remove the line break that is caused by a break tag
I have come up with a solution that works in chrome, but not in firefox / IE11. Kind of curious if there is a CSS only solution that I could use in this situation that would work across most modern browsers:
HTML
<p>This line breaks in firefox,<br> but not chrome</p>
CSS
br {
display: inline-block;
content: " ";
width: 7px;
}
JSFiddle
Edit:
The break tag also needs to act like a space between the two words.
Using the following markup works cross browsers:
HTML
<div class="test">WORD<br> WITH<br> SPACE</div>
<div class="">WORD <br>WITH <br>SPACE</div>
CSS:
.test br{
display: none;
}
Use case is if you want to have a tag at a certain media query while still retaining spaces between the letters.
JSFIDDLE
I tried a few CSS methods and none of them are working in Firefox. I would suggest using a little bit of JavaScript to help you out.
Using jQuery, or just plain JS, insert a spacer element after each <br>
$('br').after('<span class="spacer"></span>');
The CSS:
br { display: none; }
.spacer { content: "\00a0"; }
I have been pulling my hair out trying to get Chrome to style my search input with a background image. Firefox has no problem, but I fear it's because it treats the input as a regular text input. Is this simply not possible?
Try this as a demo:
<input type="search" />
input[type="search"] {
background: transparent
url(http://google.com/intl/en_ALL/images/srpr/logo1w.png) no-repeat 0 0;
}
If it worked correctly, it should put Google's logo (or part of it) as the background image for the "Search" input. But as you will see when you look at this in Chrome, it DOES NOT WORK. Any ideas, or is this just one of HTML5's quirks? :\
You can get Chrome (and Safari) to play along better with your styles on an HTML5 search field (including background images) if you apply this in your CSS:
-webkit-appearance: none;
You may also want to change -webkit-box-sizing to...
-webkit-box-sizing: content-box;
...since it appears that Webkit defaults this to the border-box value (basically the old IE5 box model).
Be warned, there's still no (apparent) way to have any effect on the position/appearance of the field-clearing button, and since only Webkit generates that button, you may find some new cross-browser annoyances to deal with.
Complete solution to remove all extra design caused by browser. This will change the search field to normal input field
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}
input[type="search"]{
-webkit-appearance: none;
-webkit-box-sizing: content-box;
outline:none;
}
Like you said, Mozilla treats search inputs as text. For Webkit browsers however (Chrome, Safari), the search input is styled as a client created HTML wrapper for the internal Webcore Cocoa NSSearchField. This is what gives it the round edges and the 'x' button to clear itself when there is text within it. Unfortunately it seems that not only are these extra features inaccessible by CSS/JS for the time being, but it also seems that there's no W3 specification for what CSS properties can be applied to this element as well as other new HTML5 elements. Until there is such a specification I wouldn't expect to have consistent behavior.
The cancel button can be styled with the following
input[type="search"]::-webkit-search-cancel-button {
/* Remove default */
-webkit-appearance: none;
/* Now your own custom styles */
height: 10px;
width: 10px;
background: red;
/* Will place small red box on the right of input (positioning carries over) */
}
Styling can be removed using
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}
http://css-tricks.com/7261-webkit-html5-search-inputs/
I've noticed that in the IE 8 Dev Toolbar's CSS tab, only some of the CSS elements show up. Does anyone know why that happens?
For example, in the CSS file, I might have:
.A
{
cursor: pointer;
color: #09F;
}
.B
{
color: #999;
}
.C:hover
{
text-decoration: underline;
}
But IE8's Dev Toolbar will show:
.A
{
cursor: pointer;
color: #09F;
}
.C:hover
{
text-decoration: underline;
}
Just a guess, but maybe your document doesn't have any .B items, or maybe everything in .B is overridden everywhere it's used and IE garbage-collects it? Or maybe you're loading an old version of the CSS sheet from the cache and need to refresh it or clear your cache.
When I try your example, I don't get the result that you are describing. All the classes show up under the CSS tab, even if they are not used in the page.
The pseudo class C:hover doesn't show up in the HTML style information on an element that uses it, but it shows up just fine under the CSS tab.
If you have some incorrect CSS, for example omitting the # in a color literal:
.B
{
color: 999;
}
Then the style is ignored if the page renders in standards compliant mode, so it naturally doesn't show up under the CSS tab. (If the page is rendered in quirks mode, the browser accepts the style eventhough it's incorrect and it shows up with the # added.)