In first time when I'm clicking in div my carret (cursor) go up, but if I writting text into div text is printed correctly (in the middle of div). How can I fix problem with placeholder in this div? I need the cursor to initially appear in the middle (like text when you are printing).
Demo http://jsfiddle.net/0gr09835/2/, and the related snippet:
[contenteditable=true]:empty:before {
content: attr(placeholder);
display: block; /* For Firefox */
}
[contenteditable=true]:empty:focus:before {
content: "";
}
My screenshot:
It works correctly in Chrome, but not in Firefox.
This seems like a fairly old bug in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=904846).
A possible workaround would be to replace content: '' with display: none in [contenteditable=true]:empty:focus:before.
div.msg {
font-size: 16px;
float: left;
width: calc(100% - 80px);
height: 64px;
line-height: 64px;
padding: 0px 10px;
color: #1a1a1a;
border: 0;
background-color: transparent;
outline: none;
font-weight: 400;
border: 1px solid #000;
margin-top: 25px;
}
[contenteditable=true]:empty:before{
content: attr(placeholder);
display: block; /* For Firefox */
}
[contenteditable=true]:empty:focus:before {
display: none;
}
<div class="msg" name="msg" placeholder="Write message..." contenteditable="true"></div>
A similar problem was also mentioned in Firefox sets wrong caret position contentEditable on focus.
Related
Implemented a clear button using -webkit-search-cancel-button following the next post:
https://stackoverflow.com/a/64267916/1065145
The problem with the implementation referenced above is that it renders the clear icon invisible when out of focus, but it still occupies space and it doesn't look nice at all:
It can be either a long placeholder on a small device or a long user query:
Trying to solve it with display: none doesn't really work, because it still renders invisible when the input is in focus, but there is no user input yet and only the placeholder is shown (and part of it is eaten by the invisible icon).
Q. Is there a way to make icon truly invisible so it is shown only on two conditions:
The input is in focus.
User has provided some input and the placeholder is gone.
display: none; and display: block; worked for me (the newest Chrome).
It it necessary to add dispay block when in focus (input[type="search"]:focus::-webkit-search-cancel-button).
If it still not working, try with !important. Sometimes browser style is harder to override. (I'm not recommending using !important, but sometimes there is no other way).
if you want show clear button even with no tekst provided by user add:
input[type="search"]::-webkit-search-cancel-button {
opacity: 1 !important;
}
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;
margin-left: .5em;
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;
display: none;
pointer-events: none;
}
input[type="search"]:focus::-webkit-search-cancel-button {
display: block;
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">
Edited:
I manage to do it, like you wanted.
I used: https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown
I also left outline borders for better understanding.
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-textfield-decoration-container {
width: 100%;
}
/* normal state, with placeholder and no value */
input[type="search"]:placeholder-shown::-webkit-textfield-decoration-container {
outline: 1px dotted yellow;
}
/* focused state, with placeholder and no value */
input[type="search"]:placeholder-shown:focus::-webkit-textfield-decoration-container {
outline: 1px dotted red;
}
/* focused state, with value */
input[type="search"]:not(:placeholder-shown):focus::-webkit-textfield-decoration-container {
outline: 1px dotted green;
}
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
height: 1em;
width: 0;
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;
pointer-events: none;
}
input[type="search"]:not(:placeholder-shown):focus::-webkit-search-cancel-button {
display: block;
width: 1em;
margin-left: .5em;
}
input[type="search"]:focus::-webkit-search-cancel-button {
pointer-events: all;
}
input[type="search"].dark::-webkit-search-cancel-button {
filter: invert(1);
}
<input type="search" placeholder="search search search search search search" class="light">
<input type="search" placeholder="search search search search search search" class="dark">
I have checked you're issue and from my point of view the easiest way to solve the issue is the following:
input[type="search"]::-webkit-search-cancel-button {
display: none;
}
input[type="search"]:focus::-webkit-search-cancel-button {
display: block;
}
You should add those 2 lines to you're existing code and should be fine
:)
Code is here : https://codepen.io/BaciuTudor/pen/YzxaYKV
I'm trying to turn a hyperlink into an icon while turning the content text into a tooltip. The catch is I'm working in a place where I have only CSS to play with, and I can't modify the HTML or add any Javascript. I'm retrieving data from an external source in a table, and one of the columns is a hyperlink - this I want to transform into an icon with the text-content as a tooltip manner on hover.
Below snipped is how far I've gotten, is there any way of making the :hover part look, feel and behave more like a tooltip? Or is there perhaps another way completely to achieve what I'm after?
.external-link {
font-size: 0;
}
.external-link:after {
content: ' ';
background: url(https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196) no-repeat;
display: inline-block;
height: 32px;
width: 32px;
}
.external-link:hover {
/* Well it shows the text, but it ain't pretty nor very functional.. */
font-size: initial;
}
Stack Overflow
It's a bit tricky, but it's achievable with modifying before and after pseudo-elements. You just have to write tooltip content in your content property, otherwise, you should modify your HMTL itself.
So your final code should be something like this:
.external-link {
font-size: 0;
}
.external-link::before {
content: 'Stack Overflow';
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
left: 40px;
z-index: 1;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
.external-link::after {
content: ' ';
background: url(https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196) no-repeat;
display: inline-block;
height: 32px;
width: 32px;
}
.external-link:hover.external-link::before {
/* Well it shows the text, but it ain't pretty nor very functional.. */
font-size: initial;
visibility: visible;
opacity: 1;
}
Stack Overflow
You can just edit your css like below. Just some idea. Not sure if you can write the tooltip text into css
.external-link {
font-size: 0;
position: relative;
}
.external-link:after {
content: ' ';
background: url(https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196) no-repeat;
display: inline-block;
height: 32px;
width: 32px;
}
.external-link:before {
content: 'Text';
position: absolute;
display: inline-block;
height: auto;
padding: 2px 5px;
width: 100%;
display:none;
color: white;
font-size:initial;
background: #00000099;
bottom: -15px;
}
.external-link:hover:before {
/* Well it shows the text, but it ain't pretty nor very functional.. */
display:block;
}
Stack Overflow
I have come up against a very annoying CSS issue while trying to get a project working cross-browser (not bothered about IE, it's only a hobby project, but it would be nice to get it working on all modern browsers at the very least). It relates to some checkboxes which I wish to apply custom styles to - I know you can't do very much with the standard HTML <input type="checkbox"> so I have done what is recommended in many places, and used a ::before pseudo-element. And I was pleased with the result in Chrome. Imagine my surprise when I find that my custom checkbox simply doesn't display at all in Firefox!
I've been playing with this for a few hours and have stripped it right back to the very root of the problem - and it's something to do with the checkbox itself, rather than any other CSS it's interacting with. Here's the bare minimum example:
input[type="checkbox"] {
visibility: hidden;
}
input[type="checkbox"]::before {
visibility: visible;
content: "";
display: block;
width: 1.1em;
height: 1.1em;
color: #eddc23;
border: 1px solid #eddc23;
background-color: #540123;
border-radius: 35%;
line-height: 1.27;
text-align: center;
cursor: pointer;
}
input[type="checkbox"]:checked::before {
content: "\2713";
}
<input type="checkbox">
This should show a dark red checkbox which has a yellow tick when selected. It works perfectly on Chrome and Opera, but not at all on Firefox or Edge. (Here's a CodePen link of the same in case the Stack Overflow snippet somehow exhibits different behaviour). CSS isn't one of my strong points and despite a few hours of experimenting and googling, I'm baffled.
Would appreciate any pointers, not only as to how to get this working cross-browser, but as to why it's not working on FF/Edge (inspecting the element on Firefox shows no sign of a ::before pseudo-element at all. I've also ruled out it being to do with the empty content property, since changing that to real text fails to make it visible in the browsers concerned).
Sometimes with labels you can solve this type of problems
input[type="checkbox"] {
display: none;
}
span {
visibility: visible;
content: "";
display: block;
width: 1.1em;
height: 1.1em;
color: #eddc23;
border: 1px solid #eddc23;
background-color: #540123;
border-radius: 35%;
line-height: 1.27;
text-align: center;
cursor: pointer;
}
input[type="checkbox"]:checked + label span::before {
content: "\2713";
}
<input type="checkbox" id="checkbox">
<label for="checkbox">
<span></span>
</label>
Just to record it in brief, what I ended up doing was putting a <div> as the next sibling of the checkbox, hiding the checkbox with opacity: 0;, and positioning the div on top of the checkbox but with lower z-index. This means that the "fake" checkbox responds in the same way a real one would, and by keeping the actual checkbox in the DOM hopefully this would still score reasonably on accessibility.
You should reset the appearance:
input[type=checkbox] {
/* Reset */
-webkit-appearance: none;
appearance: none;
background-color: #fff;
}
But the best way is here: https://moderncss.dev/pure-css-custom-checkbox-style/
Example snippet:
/* Checkboxes */
input[type=checkbox] {
/* Reset */
-webkit-appearance: none;
appearance: none;
background-color: #fff;
width: 0;
height: 0;
margin: 0;
margin-right: 25px;
position: relative;
text-align: center;
font-size: 16px;
}
input[type=checkbox]:focus {
box-shadow: none;
outline: none;
}
input[type=checkbox]::before {
content: '';
position: absolute;
top: -16px;
display: block;
width: 20px;
height: 20px;
border: 1px solid #23151d;
background: #fff;
box-sizing: content-box;
border-radius: 3px;
}
input[type=checkbox]:checked::before {
border: 1px solid #e63244;
background: transparent;
background: #e6324403;
}
input[type=checkbox]::after {
content: '✓';
text-indent: 4px;
position: absolute;
top: -14px;
display: none;
width: 20px;
height: 20px;
box-sizing: content-box;
text-align: center;
}
input[type=checkbox]:checked::after {
display: block;
color: #e63244;
}
/* / Checkboxes */
<p>
<input type="checkbox" checked>
<input type="checkbox" checked>
<input type="checkbox" checked>
</p>
I'm using one juicer.io plugin for Social Media.
There is Load More button in <a> element.
I would like to change text from Load More to Mehr Laben, I did that using ::before element and works fine for all browsers except IE 11.
I've created example on JSFiddle to demonstrate problem.
Problem is IE 11 can't read pseudo element, maybe only for .
I've tried to replace ::before with :before but not working.
Note: This <a> was generated dynamically, and I can't wrap.
JSFIDDLE: https://jsfiddle.net/uy4xewpr/
You can run this inside IE and you will see empty page, but inside Chrome ... works fine.
HTML:
READ MORE
CSS:
a{
visibility: hidden;
color: #000;
font-size: 17px;
display: flex;
text-transform: none;
}
a::before{
display: inline-block;
visibility: visible;
content: "Mehr Laden";
padding-left: 32px;
padding-top: 3px;
min-width: 124px;
}
You can use two tricks here:
font-size: 0
a {
font-size: 0;
color: #000;
font-size: 0;
display: flex;
text-transform: none;
}
a::before {
font-size: 17px;
display: inline-block;
content: "Mehr Laden";
padding-left: 32px;
padding-top: 3px;
min-width: 124px;
}
READ MORE
color: transparent
a {
font-size: 17px;
color: transparent;
display: flex;
text-transform: none;
}
a::before {
color: #000;
display: inline-block;
content: "Mehr Laden";
padding-left: 32px;
padding-top: 3px;
min-width: 124px;
}
READ MORE
I don't really think the behavior of IE11 is odd. In fact this should be expected.. pseudo elements are children to the parent element so setting the a to have visibility hidden then setting the visibility of the pseudo content to be visible shouldn't work. This is actually wrong, I thought visibility should behave like opacity where you cannot unset the opacity in a child of a parent with different opacity. It's probably a bug in IE11 not bad implementation from other browsers like I thought.
To fix this remove the visibility and use font-size: 0 on the a then set the font-size to the desired value on the pseudo element
a {
color: #000;
font-size: 0;
display: flex;
text-transform: none;
}
a::before {
display: inline-block;
font-size: 17px;
content: "Mehr Laden";
padding-left: 32px;
padding-top: 3px;
min-width: 124px;
}
The only drawback is that it won't work on Android 2 which is a very old version you probably don't care about
I using Twitter's Bootstrap and this color picker: http://bootstrapformhelpers.com/colorpicker/.
And I'm having an issue with these div/span/input created by library.
It uses bootstrap classes the apply display: table to div, display: table-cell to span and display: inline-block to input.
I've overwritten some CSS attributes to get my expected layout, testing it in Chrome.
However, it does not work as expected in IE9 and Firefox. Works as expected in Chrome, Opera, IE10 (and IE9#IE10).
I've reproduced it in jsFiddle, here is the important code:
HTML:
<div>
<span class="btn">
<span></span>
</span>
<input type="text" />
</div>
CSS:
body {
line-height: 20px;
}
div {
display: table;
position: relative;
width: 140px;
}
span.btn {
background: #ccc;
display: table-cell;
padding: 6px 12px;
position: relative;
left: 90px;
}
span.btn > span {
background: #333;
display: block;
height: 16px;
width: 16px;
}
input {
border: 1px solid #ccc;
display: inline-block;
height: 20px;
margin-left: -42px;
padding: 6px 12px;
width: 100%;
}
Why this is exactly happening? Every browser interpreting display: table/table-cell differently?
What is the cross-browser solution?
Because Firefox doesn't support position: relative; on table cells...
Bug Report
The issue is that you are actually having some really weird markup and CSS positioning, you should consider nesting an absolute positioned element under a relative positioned parent.
Demo
Demo 2 (With a center black box)
div {
position: relative;
width: 180px;
border: 1px solid #ddd;
margin: 20px;
height: 30px;
}
div input {
padding: 6px;
}
.btn {
position: absolute;
height: 30px;
width: 30px;
background: #aaa;
right: 0;
top: 0;
}