i have this css to change the text selection color which works great:
::selection {
background: #e4d2ba;
}
but how can i change the color of the selection of numbers in this time input?
these dont seem to work for me:
input::selection {
background: #e4d2ba;
}
input[type=time]::selection {
background: #e4d2ba;
}
UPDATE: (regarding possible duplicate)
this post has a lot of information on styling time inputs, but nothing on changing the selection color
this works:
input[type=time]::-webkit-datetime-edit-hour-field:focus,
input[type=time]::-webkit-datetime-edit-minute-field:focus,
input[type=time]::-webkit-datetime-edit-second-field:focus,
input[type=time]::-webkit-datetime-edit-ampm-field:focus {
background-color: #e4d2ba;
}
my confusion was based on assuming the numbers were in a selection state since it looked like the same color as default selected text to me. but actually it's the background color of each whole field when focused. which was also surprising since i had assumed the whole combined time field held the focus due to the default blue border
Related
I am working with an appointment booking system. this system includes a full calendar with a monthly list view.I want to change the background and text color when hover list item.it default gets a white color background. how do change it?
if (calev.end._d.getTime() < ntoday.getTime() ) {
elt.css('background-color', '#5c5c3d');//change backgroud color
elt.css('color', 'white');//change text color
elt.find(".fc-event-dot").css('background-color','white');//change dot color
//here I want write a hover background and text color code
}
You can set a simple CSS rule to achieve this - if you inspect the fullCalendar HTML using your browser's element inspector, you can find the class it uses to identify an event in the list view, and target that.
For example:
.fc-list-table .fc-list-event:hover td {
background-color: red;
}
Working demo: https://codepen.io/ADyson82/pen/ExRjWLp
i think this may help
fc-list-item:hover td{
background-color: red !important;
color: white!important;
}
I have button which is <a> element with href, which doesnt have any background set on :active/:focus/:visited, but on force/3dTouch tap it gets this weird #b8b8bc background under the text only (while <a> doesnt have any children e.g. <span> etc so I suppose this is the text node highlight).
here's the gif to illustrate the behavior.
I've tried adding -webkit-tap-highlight-color: transparent but it changes only regular tap color, not the forced/3d one
also I thought maybe that's selection color (as I can reproduce this on various websites) so tried to use selection selectors which didn't help as well
::selection {
background: transparent;
}
::-webkit-selection {
background: transparent;
}
::-moz-selection {
background: transparent;
}
Any ideas about possible origin of this?
Good job digging up.
I had the same issue plus another one and here are my solutions.
Post is old but someone could find it useful like me today.
First of all, the forced background was covering my link text totally because I was using user-select: none; on my header links.
So that's something to check, just in case.
Regarding the background color, Force Touch doesn't use the link parent element background but the one that's under it.
If you want to "feel it", we could say that Forced Touch digs into the direct parent background and let the under layer appears.
So, to counter that without having to touch to background color, I use some z-index in the parent element to elevate it, preventing Forced Touch to "dig" :)
So if your links parent element is named card, you can add to your CSS:
.card {
isolation: isolate;
z-index:1;
}
Now, Force Touch will use the parent background color as we want to.
Okay so I found sort of "solution" based on parent's color.
Try to set *{background: red}.
If worked try set same on few parents .parent1 { background: pink}, .parent2 { background: lightblue}, .parent1 { background: salmon} etc.
In my case I found the color applied to force touched text was menu wrapper's background that takes most of the screen when menu is opened.
Side effect of this change - all forcetouched elements will have same color, no option to specify :hover or :active colors (you can see the color is slightly different on the 1st click) and ALL links will have same background:
I imagine you can try setting wrapper's background via JS based on what is clicked. Not sure if that will work. see docs here:
WebKit DOM Programming Topics
So far this seems to me too fragile to touch and I would not recommend doing this. Though you can change this color I've decided to let OS do what it wants here.
I am trying to create a dark mode toggle button with a checkbox (I will eventually change to a toggle in CSS). So far, I was able to change the elements in my Javascript canvas to be in "dark mode" and changed their color easily but is there a way I can use this same switch/checkbox in the Javascript to also toggle the CSS portion? I do not want to create another checkbox to change the background color of the HTML. I tried the method below with no result. I want the checkbox to basically turn the background of the webpage black and go back to white if unchecked. My full code is on CodePen https://codepen.io/Fragile404/pen/VxZVxm
body {
background-color: white;
}
body.checkbox: checked;
{
background-color: black;
}
You'll need to use JavaScript for this. Change your final if to:
if(darkMode.checked) {
toggleColor = (0,0,0);
document.body.style.backgroundColor= 'black';
} else {
toggleColor = (255,255,255);
document.body.style.backgroundColor = 'white';
}
Why? CSS only parses forwards and downwards. Which means you can use a parent condition in order to style a child and you can use a condition on a previous sibling to style up a later one, but not the other way around.
There were many discussions around the subject and attempts to change the status-quo but, in reality, if CSS would also parse backwards, web would be ten fold slower, at least.
I have a textarea with transparent text. I need it to be transparent to work around a problem I'm having with Highlight.js.
It works fine, but there is a problem though. The user doesn't know where he is in the textarea. I need the focus rectangle (that's what it's called in the Windows UI apparently) to have specific properties. In this case it must be white and flickering. The rest of the text should stay transparent.
textarea {
color: transparent;
z-index: 1;
}
Like that, but with a white focus rectangle.
EDIT:
People seem to misunderstand me. I don't want to edit the cursor. I want the edit the vertical flickering dash that indicated where you're editing in the textarea.
EDIT2:
It's called a caret apparently.
Hey You can refer the following Blog for your requiremenr :
https://beradrian.wordpress.com/2008/01/08/cross-browser-custom-css-cursors/
Let me know if is it helpfull to you.
code:
input, textarea {
cursor: url(cursor.cur);
}
I want to be able to specify the highlight colour that appears around an input text box when a user selects it. By default (on a Mac) this always seems to be a light blue colour as per the screenshots below.
Does anyone know if this is possible and if so how?
Unselected:
Selected:
use
input:focus {
border:/** your style definitions **/
outline: /** **/
box-shadow: /** **/
}