I'm making this checkbox list and everything works great until i place it inside this div and wrap the scss in it:
<div data-component="modal"></div>
[data-component='modal'] {styling goes here}
Outside of that in css, it checks great. Can someone tell me what is going on?
Also, the reason it's called modal, it's because this checkbox is inside a modal. And at first I thought the modal was messing things up, but it works great. The issue is in scss, for some reason.
Here's the codepen.
The Problem is you have given
background: #fff;
in .custom-checkbox .custom-control-indicator {
that's why tick is not shown.
Remove that and check it again.
Actually it works, you are overriding the check icon with background you can test by deleting or changing this line background: #fff;.
Maybe something like this ?
.custom-control-input:checked~.custom-control-indicator{
background: radial-gradient(circle at center, #1062a4 .6ex, white .7ex);
}
Hope helps,
Related
Hey guys I am new to wordpress and have this task of getting green button to blue. So I found this button but its in anchor tag in class menu-separator is there any way that I can type custom css to make color blue.
right now I have this
.menu-separator .button{background-color: blue !important;}
Wont work because a is missing.
First off you put
.button
You need
a button
Also you cloud use this
<buttton style="background-color: green;">blah blah</button>
Though obviously you'll want to use CSS but just to test to make sure the problem isn't coming from somewhere else try that as well if the whole buttoninstead of .button doesn't work
Also we can't see all your code so this makes it a little harder to help because I don't know how nested the button is.
I'm trying to make a flat black background below the navbar but that seems to be an issue. This is particular concern because I wanted to add some JQuery functionality to the buttons on the right to cause the background color to change when they're pressed. But if something as simple as this, though fundamental, doesn't work...
Currently another issue is this thick, white strip. I honestly don't know what's causing it. I assumed that just having a white AlarmTime would mean floating white text on the page surrounded by a black background, but that's clearly not the case. It's left as the default black now simply because it's effectively invisible otherwise. For the record, it's not the flexbox nor the div causing the border because it still shows up with both of them deleted.
https://jsfiddle.net/xjrqm1k3/
body
{
background-color:black;
}
What did I do wrong?
Edit: I thought you had to have a period before the name of the selected item to select a class. I guess I might've been missing something in my code? The fiddle I posted doesn't seem to have a period Fiddle, and it's what I Copy-Pasted from my work. Do indents cause Visual Studio to count the item as a class?
Edit: Regardless, thanks for the help and information; it works.
You were doing
.body
meaning class with name body
change to body
Also you have to add !important since you're loading bootstrap after this CSS file.
See fiddle
It's probably being overriden by something else. Try this:
body
{
background-color: black!important;
}
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 use angular material for contact form but I have problem to change styles of input fields and placeholders or labels when is not on focus. I made codepen and if you look there placeholders are grey. I want them to be green, change fonts to any other, and to make good position for them using padding or everything else.
I try solution as
md-input-container.md-default-theme label,
md-input-container.md-default-theme .md-placeholder {
color: #FDFE67 !important;
}
but nothing happened. I can't figure out how to change this and I didn't find any solution on internet.
Can anyone helps me?
Thanks in advance
I added this piece of code there and it works
md-input-container.md-icon-float>label
{
color: green
}
Demo: http://codepen.io/muzic12freakzz/pen/apKEOm
This is just a starting point. You can add more styles to it.
Hi I have a div with a link however when you hover over the div the mouseover state doesn't change i.e. the mouse pointer doesn't change to a finger instead of a mouse
Unfortunately I am unable to replicate this error in jsfiddle it only seems t occur on my Wordpress installation
the address where it occurs is here http://stylrs.com/trustees/ (when you hover over individual names.)
Is there a reason for this?
How can I fix this?
Add this to your css:
.su-lightbox{ cursor: pointer }
Those blocks arn't links at all. I see though you have a click event tied to them. Just give the block a cursor:pointer css style and it will look like a link
try changing with css :
.linkclass:hover {
cursor:pointer;
}
and please edit your question and give us your code. So, we can see the real problem.
you can change it manualy like this :
.your div {
cursor:pointer;
}