Active list-group-item wrong color on page load The 2019 Stack Overflow Developer Survey Results Are InMake the cursor a hand when a user hovers over a list itemChange btn-group .active style in Twitter BootstrapActive Items in Nav on iPad not applying cssBackground color of active item of navbar on BootstrapCannot display HTML string<p> element wrong colorbootstrap navbar change active li background color manuallyList group with linked item with background color in bootstrapDefault active dropdown menu color not changingList Items not changing on hover
Get name of standard action overriden in Visualforce contorller
Is bread bad for ducks?
Falsification in Math vs Science
Star Trek - X-shaped Item on Regula/Orbital Office Starbases
Can there be female White Walkers?
Why don't hard Brexiteers insist on a hard border to prevent illegal immigration after Brexit?
How come people say “Would of”?
Are spiders unable to hurt humans, especially very small spiders?
Can a rogue use sneak attack with weapons that have the thrown property even if they are not thrown?
Can we generate random numbers using irrational numbers like π and e?
What's the name of these plastic connectors
Why was M87 targeted for the Event Horizon Telescope instead of Sagittarius A*?
Why didn't the Event Horizon Telescope team mention Sagittarius A*?
Old scifi movie from the 50s or 60s with men in solid red uniforms who interrogate a spy from the past
Keeping a retro style to sci-fi spaceships?
Is it ok to offer lower paid work as a trial period before negotiating for a full-time job?
Relationship between Gromov-Witten and Taubes' Gromov invariant
How do I free up internal storage if I don't have any apps downloaded?
Is it safe to harvest rainwater that fell on solar panels?
Why does the nucleus not repel itself?
How to notate time signature switching consistently every measure
Why doesn't UInt have a toDouble()?
How do PCB vias affect signal quality?
How to display lines in a file like ls displays files in a directory?
Active list-group-item wrong color on page load
The 2019 Stack Overflow Developer Survey Results Are InMake the cursor a hand when a user hovers over a list itemChange btn-group .active style in Twitter BootstrapActive Items in Nav on iPad not applying cssBackground color of active item of navbar on BootstrapCannot display HTML string<p> element wrong colorbootstrap navbar change active li background color manuallyList group with linked item with background color in bootstrapDefault active dropdown menu color not changingList Items not changing on hover
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I am using Bootstrap 4.3 list-group-item that I have assigned a black background to for active state like so
.list-group-item:active
background-color: black !important;
color:white;
border: none;
This works when element is triggered active by click, however on the page load the first element is the default bootstrap blue. On inspection this element has identical class and 'active' state as my custom css so why the blue color? I can remove it by removing 'active' from the class but then background is white which is not ideal.
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Wikipedia</a>html css twitter-bootstrap
asked Mar 22 at 4:34
KmopperKmopper
11
add a comment |
I am using Bootstrap 4.3 list-group-item that I have assigned a black background to for active state like so
.list-group-item:active
background-color: black !important;
color:white;
border: none;
This works when element is triggered active by click, however on the page load the first element is the default bootstrap blue. On inspection this element has identical class and 'active' state as my custom css so why the blue color? I can remove it by removing 'active' from the class but then background is white which is not ideal.
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Wikipedia</a>html css twitter-bootstrap
asked Mar 22 at 4:34
KmopperKmopper
11
add a comment |
I am using Bootstrap 4.3 list-group-item that I have assigned a black background to for active state like so
.list-group-item:active
background-color: black !important;
color:white;
border: none;
This works when element is triggered active by click, however on the page load the first element is the default bootstrap blue. On inspection this element has identical class and 'active' state as my custom css so why the blue color? I can remove it by removing 'active' from the class but then background is white which is not ideal.
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Wikipedia</a>html css twitter-bootstrap
asked Mar 22 at 4:34
KmopperKmopper
11
I am using Bootstrap 4.3 list-group-item that I have assigned a black background to for active state like so
.list-group-item:active
background-color: black !important;
color:white;
border: none;
This works when element is triggered active by click, however on the page load the first element is the default bootstrap blue. On inspection this element has identical class and 'active' state as my custom css so why the blue color? I can remove it by removing 'active' from the class but then background is white which is not ideal.
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Wikipedia</a>.list-group-item:active
background-color: black !important;
color:white;
border: none;
.list-group-item:active
background-color: black !important;
color:white;
border: none;
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Wikipedia</a><a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Wikipedia</a>html css twitter-bootstrap
html css twitter-bootstrap
asked Mar 22 at 4:34
KmopperKmopper
11
asked Mar 22 at 4:34
KmopperKmopper
11
asked Mar 22 at 4:34
KmopperKmopper
11
asked Mar 22 at 4:34
KmopperKmopper
11
asked Mar 22 at 4:34
KmopperKmopper
11
11
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
The active selector is working as intended: CSS :active Selector
The background of the list item element is black when you remove the active selector, did you mean that the rest of the page is white? You could just set the background colour of the parent div to be black as well?
answered Mar 22 at 4:41
CallumRCallumR
1678
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55292976%2factive-list-group-item-wrong-color-on-page-load%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The active selector is working as intended: CSS :active Selector
The background of the list item element is black when you remove the active selector, did you mean that the rest of the page is white? You could just set the background colour of the parent div to be black as well?
answered Mar 22 at 4:41
CallumRCallumR
1678
add a comment |
The active selector is working as intended: CSS :active Selector
The background of the list item element is black when you remove the active selector, did you mean that the rest of the page is white? You could just set the background colour of the parent div to be black as well?
answered Mar 22 at 4:41
CallumRCallumR
1678
add a comment |
The active selector is working as intended: CSS :active Selector
The background of the list item element is black when you remove the active selector, did you mean that the rest of the page is white? You could just set the background colour of the parent div to be black as well?
answered Mar 22 at 4:41
CallumRCallumR
1678
The active selector is working as intended: CSS :active Selector
The background of the list item element is black when you remove the active selector, did you mean that the rest of the page is white? You could just set the background colour of the parent div to be black as well?
answered Mar 22 at 4:41
CallumRCallumR
1678
answered Mar 22 at 4:41
CallumRCallumR
1678
answered Mar 22 at 4:41
CallumRCallumR
1678
answered Mar 22 at 4:41
CallumRCallumR
1678
1678
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55292976%2factive-list-group-item-wrong-color-on-page-load%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
