logo
down
shadow

How to set both a background colour and a different text color on the same element


How to set both a background colour and a different text color on the same element

By : rvliet
Date : November 22 2020, 09:00 AM
wish of those help The browser is setting a color to a:hover, and it would override any color style you put in li:hover
You can add a style to it using CSS like this:
code :
li:hover {
    background-color: #60266f;
}
li:hover a {  
    color: #f00;
}


Share : facebook icon twitter icon
IE CSS Bug: background-color: transparent behaves differently to background-color: (any other colour)

IE CSS Bug: background-color: transparent behaves differently to background-color: (any other colour)


By : Basil Gren
Date : March 29 2020, 07:55 AM
To fix the issue you can do Try faking a background image or setting it to a blank.gif instead of making it transparent.
code :
background:url(blank.gif);
CSS switch input text is not visible when background colour applied to parent element

CSS switch input text is not visible when background colour applied to parent element


By : Ahmed Said El-sayed
Date : March 29 2020, 07:55 AM
may help you . Increasing the z-index on the .topcoat-switch class should do the trick.
Check it out: http://codepen.io/anon/pen/vcqGh
How can I have, in CSS, a double background color and the text centered in the second background color element?

How can I have, in CSS, a double background color and the text centered in the second background color element?


By : Robin Scher
Date : March 29 2020, 07:55 AM
Hope that helps You can use the pseudo element ::before to create the left colored side
Note, the div's you used is invalid as a direct child of an ul, so I removed them
code :
ul.menu {
  display: flex;
  list-style: none;
  padding: 0;
}
ul.menu li {
  margin: 0 5px;
}
ul.menu a {
  position: relative;
  display: inline-block;
  width: 120px;
  background: black;
  color: white;
  padding: 4px 0 4px 10px;
  text-decoration: none;
  text-align: center;
}
ul.menu a::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: gray;
  width: 10px;
}
<ul class="menu">
    <li><a href="#">Firefox</a></li>
    <li><a href="#">Chrome</a></li>
    <li><a href="#">Opera</a></li>
</ul>
ul.menu {
  display: flex;
  list-style: none;
  padding: 0;
}
ul.menu li {
  margin: 0 5px;
}
ul.menu a {
  position: relative;
  display: inline-block;
  width: 120px;
  background: black;
  color: white;
  padding: 4px 0;
  text-decoration: none;
  text-align: center;
  border-left: 10px solid gray;
}
<ul class="menu">
    <li><a href="#">Firefox</a></li>
    <li><a href="#">Chrome</a></li>
    <li><a href="#">Opera</a></li>
</ul>
Change background element's background-color and text color when clicked on mobile

Change background element's background-color and text color when clicked on mobile


By : user1810891
Date : March 29 2020, 07:55 AM
should help you out For the second problem, have you tried the :active selector? For example, using part of your CSS code:
code :
#one:focused, #one:visited, #one:hover, #one:active {
    background-color: black;
    color: white;
}
Change colour of text foreground based on background color input

Change colour of text foreground based on background color input


By : 继委 柳
Date : March 29 2020, 07:55 AM
wish helps you You could calculate if black or white would have a higher contrast with the color given by the user based on the hexadecimal value of the color.
This link goes into detail on two ways to do this calculation. https://24ways.org/2010/calculating-color-contrast/
Related Posts Related Posts :
  • Center the text in a row of an HTML table
  • SVG in Jekyll not showing in browser, but code is
  • Polymer 1.x: How to data bind to a variable boolean attribute?
  • scrolling an element on top of a fixed element
  • Link to pages/home not rendering the way I expect
  • Using Bootstrap's model, .modal-header and .modal-footer not working
  • How can I SIMPLY Toggle/Hide a Menu from sub-menu in AngularJS
  • Using CSS with Bootstrap framework
  • How do I get a html5 file input to accept only certain file types consistently across browsers?
  • Jumbotron BG image resizeable, wont show up
  • Resize images to fit display:flex divs
  • Three layers transparency
  • HTML side by side divs, while one has fixed width and the second one fits remaining space
  • DIV Stacking & Spacing Using CSS
  • How to make space between menu items in CSS/HTML
  • CSS display:flex equal parts
  • Image Caption Hover Animation in html or/and css
  • How can I create an alignment toward the top left corner?
  • Page is showing two scrollbars
  • Z-index issues - How to bring a child element onto the parent's below element?
  • Ingesting videos via bulk uploading into Azure media services from HTML5
  • border-radius with dropdown menu
  • Is there an HTML entity for an info icon?
  • Style two html form text area/inputs on same page differently
  • Bootstrap 3 Grid Layout not respecting blank "Margin" columns?
  • HTML tag with different attributes
  • CSS Clear depending on odd of even amount of items
  • Center div on wrapping (when it doesn't fit on the line)
  • How to remove blank space around SVG
  • Vertical Align Bootstrap Radio Button Image
  • Bootstrap HTML carriage return
  • CSS Checkbox Styling Behaving Differently on Other Pages
  • How to keep a link disable when it's still on the same page
  • Container div overlapping child horizontally
  • How to vertically & horizontally center children elements in a fluid layout set by media queries?
  • Layer responsive images on top of each other with Bootstrap
  • Is there a way to hide html inside curly braces in an ASP.NET MVC Razor html helper?
  • Show variable content in bootstrap tooltip
  • How to reference to WIN32 object under MS Windows 7 64bit in VBScript
  • Center inline-block list
  • Background image isn't showing up. Why?
  • CSS Click after transform
  • CSS Button Animation - How to Accomplish?
  • How to find out which favicon a browser actually uses
  • CSS Media Queries Overriding Each other
  • Cycle2 Carousel not working when it's in a DIV
  • HTML to landscape MS Word
  • Reduce the background simultaneously as site reduction - Bootstrap
  • How to set vertical align of elements that exist into a div tag to center with css?
  • I'm resizing an image while scrolling in my website, but i cant figure how to make an animation for the resizing
  • How to style up a hr tag
  • vertical scrolling blocked by Hammer.js
  • Site layout breaks on mobile view
  • I'm missing something in my Head to make the site responsive
  • Fluid/fixed design with sidebar composed of two items
  • Squeeze a div between two other divs when window resizes
  • Short form for expression <label>
  • Align :before with text both with same height
  • Handlebars not populating data after first space in input field
  • CSS3 sprite animation for different size
  • shadow
    Privacy Policy - Terms - Contact Us © animezone.co