This question already has answers here:
Bootstrap 3 - Change dropdown background colour
(4 answers)
Closed 8 years ago.
I have a dropdown pill that turns pink on hover and stays pink when clicked. However if you click it twice and then move the mouse away it turns grey.
It is the "recipient" link in the following example:
Example and code
Why is this? Is there some CSS I can use to overwrite this functionality? I'd rather the background went black again.
This is what I mean:
Thanks
I cant' reproduce your issue with the double click but I can see a gray background with Tab Navigation. Add also the state for the :focus. Try this:
.nav-pills>li>a:hover, .nav-pills>li>a:focus {
background-color: #FF6699;
}
BootplyDemo
Related
This question already has answers here:
How to style the option of an html "select" element?
(21 answers)
How do I style a <select> dropdown with only CSS?
(25 answers)
Closed last month.
Usually when you create a <select> option field and use color to change the color.
This applies only to when the dropdown is clicked upon and is in an active state.
Is it actually possible to change the color of the option that is selected? So if you look at the code, only make the option Apple red that is selected (when another fruit is selected, make that red). However, the colors of the text need to black in the dropdown.
select option {
color: red;
}
<select>
<option>Apple</option>
<option>Banana</option>
<option>Peach</option>
<option>Strawberry</option>
<option>Pineapple</option>
</select>
Since this component is a re-used one, I can not edit the HTML structure of it.
I tried to give the options a color, but this resulted in changed all of the option in the active dropdown and not the item selected.
I also looked up other topics and answers in here but every provided code also changes the color in the active dropdown state or they modify the HTML.
This question already has answers here:
Removing the blue glow from an HTML text input when selected
(3 answers)
Closed 2 years ago.
how can I remove this light blue glow around my matInput inside mat-form-field?
I'm not sure if what property I need to override and I have no idea how to go about this, I tried searching but couldn't find anything.
any help would be appreciated
Try this in your CSS:
input:focus {
outline: 0;
}
This question already has answers here:
Click through div to underlying elements
(17 answers)
Closed 2 years ago.
I have a <div> with an onClick handler that contains a fontawesome icon. Clicking anywhere in the div returns the correct element ID. Clicking on the fontawesome icon returns no ID. In the console, clicking on the icon shows the element being clicked on is the svg itself and not the <div>. How do I get around this short of writing code for both the icon AND the div?
CodeSandBox Example
use e.currentTarget.id instead of e.target.id
onClick={(e) => alert(e.currentTarget.id)}
I may not have described the issue accurately with the title, but it's easier to explain here:
I have a button that has an icon image contained within it. I need to get rid of the grey box around that icon and keep the icon itself, along with the button functionality. I assigned the button a second class called "nogray", and in my styling sheet I set opacity to 0.
However, this got rid of the entire button, along with the little orange trash bin icon, which I need to be visible. Essentially, I need the button to function the same way, just with the orange icon and no grey box. In this screenie, you can see the buttons at the top of each bulletin note.
Here is the button code in the bulletin notes view:
<button class ="remove-card nogray" id="#item.BulletinId" type="button"><i
class="fa fa-trash"></i></button>
And here is the css for the button:
i.fa.fa-trash::before {
content: "\f1f8";
}
.remove-card.nogray {
opacity:0;
}
(i.fa.fa-trash::before targets the trash icon, and .remove-card.nogray targets the outer gray area. However, I suspect that the latter is targetting the entire button because setting the opacity to 0 affects both gray area and icon.
How would I tweak the button code so that the opacity is 0 only for the grey, and not the icon? I've tried changing the order of the code element by element, but a lot of it is guesswork because this is a team effort and I did not personally write the button code. I'd also like to apologize in advance if this is an impossible question to answer; if there's some detail you need to know, please tell me and I will edit this to include it.
Thank you very much for any suggestions!
I realized I was targeting the wrong lines of code in my css. There was an ActionLink that a teammate commented out, and I assigned the classes from that to my original button code and was able to target the button that way instead.
This question already has answers here:
Move the mouse pointer to a specific position?
(10 answers)
Closed 4 years ago.
How can I make the cursor jump off an item when the item is clicked?
I have an image that acts different ways when hovered, clicked, double clicked etc, and I'd like the double click to throw the cursor to the other side of the screen or at least off the image or the div the image is in.
As in the image clicked would start repelling the cursor after click?
There is no mechanism for moving the mouse by javascript. However you can put a control like input and on the click on the image you put the focus on that control. So this way the mouse cursor moves to another part of the page.
The below jQuery code will help you.
So the click event of the img:
$("#img_id").click(function(){
$("#somecontrol_id").focus()
});
More information you can look at this link.