I tried to change the color of the bottom bar in the tab selected but without success. I can change the background color and the color of the text but not of the bar.. By the way this is what i've done:
<paper-tabs selected="0" >
<paper-tab>TAB1</paper-tab>
<paper-tab>TAB2</paper-tab>
<paper-tab>TAB3</paper-tab>
</paper-tabs>
<style shim-shadowdom>
body.core-narrow {
padding: 8px;
}
paper-tabs, core-toolbar {
background-color: #00bcd4;
color: #fff;
box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
}
core-toolbar paper-tabs {
box-shadow: none;
}
paper-tabs[noink][nobar] paper-tab.core-selected {
color: #db352c;
}
paper-tabs.transparent-teal {
background-color: transparent;
color: #00bcd4;
box-shadow: none;
}
paper-tabs.transparent-teal::shadow #selectionBar {
background-color: #00bcd4;
}
paper-tabs.transparent-teal paper-tab::shadow #ink {
color: #00bcd4;
}
h3 {
font-size: 18px;
font-weight: 600;
}
</style>
The color i want is color: #db352c; but the bar is still and always yellow!! How can i change it?
Following this Link: polymerElements/paper-fab
Example Code:
paper-fab {
--paper-fab-background: #db352c;
--paper-fab-keyboard-focus-background: red;
}
The docs show that there is a custom property to let you change the colour of the selection bar:
--paper-tabs-selection-bar-color
Related
I've been trying to change the color of my text (Normal and Hover) but nothing seems to work. Tried !important but still not showing. Have tried looking at other answers but didn't work.
CSS & HTML Div Code (I have tried removing text-decoration none)
#five {
position : fixed;
top : 10px;
right : 100px;
font-family : monospace;
font-weight : bold;
font-size : 16px;
color : red!;
}
#five:hover {
color : black;
text-shadow : 5px 5px 5px red;
}
<p id="five">
<a href="UNKNOWN" target="_target" style="text-decoration: none;">
TEST5
</a>
</p>
You need to style the a tag, not the parent.
#five a {
text-decoration: none;
color: red;
}
#five:hover a {
color: black;
}
This happens because the <a> tag applies its own color by default (which is a benefit in most cases, but in your case you have to manually change the color directly by using the a selector).
Complete, fixed code:
#five {
position: fixed;
top: 10px;
right: 100px;
font-family: monospace;
font-weight: bold;
font-size: 16px;
}
#five:hover {
text-shadow: 5px 5px 5px red;
}
/* this what I added */
#five a {
text-decoration: none;
color: red;
}
#five:hover a {
color: black;
}
<p id="five">
TEST
</p>
Hi it's because you need to colour the a tag so you could add a class or id to the a tag and then change that.
Change the css to this:
.five {
position: fixed;
top: 10px;
right: 100px;
font-family: monospace;
font-weight: bold;
font-size: 16px;
color: red!;
}
.five:hover {
color: black;
text-shadow: 5px 5px 5px red;
}
And change the html to this:
<p id="five"><a class="five" href="UNKNOWN" target="_target" style="text-decoration: none;">TEST5</a></p>
I have a contenteditable span (display set to inline-block, so it doesn't act like a span, per se). I want the span to act like a password field on a linux terminal; you're typing, but you can't actually see it.
I've tried visibility: hidden and display: none, but both break the formatting and the text is still visible. Setting the color to the same as the background (black) makes the text invisible, but the caret is too.
I'd prefer for this to be done with CSS, but if it can't be done, I'll just use JavaScript. Here's my code:
.input {
display: inline;
}
body {
background-color: black;
}
#field-in {
color: #ffffff;
outline: none;
display: inline-block;
}
<div class="input">
<span id="field"><span id="field-name">Invisible Text:</span><span id="field-in" contenteditable> </span></span>
</div>
You can change the caret color so that the caret is shown:
.input {
display: inline;
}
body {
background-color: black;
color: white;
}
#field-in {
color: #000000;
caret-color: #ffffff;
outline: none;
display: inline-block;
}
#field-in::selection, #field-in::-moz-selection {
color: #000000;
background-color: #000000;
}
<div class="input">
<span id="field"><span id="field-name">Invisible Text:</span><span id="field-in" contenteditable> </span></span>
</div>
Two CSS properties:
color: rgba(0,0,0,0);
caret-color: red;
One CSS pseudo-element:
::-moz-selection { background: rgba(0, 0, 0, 0); }
::selection { background: rgba(0, 0, 0, 0); }
The caret needs a contrasting color so adjust accordingly with caret-color. The value rgba(0,0,0,0) is transparent black -- the fourth 0 is alpha (opacity). The selection highlight is the same color so if the user selects the text with the default color (blue in Chrome) the text would be not be revealed. Note, this will work with any color background.
.input {
display: inline-block;
}
body {
background-color: none;
}
#field-in {
outline: none;
color: rgba(0, 0, 0, 0);
caret-color: red;
display: inline-block;
}
#field-in::-moz-selection {
background: rgba(0, 0, 0, 0);
}
#field-in::selection {
background: rgba(0, 0, 0, 0);
}
<div class="input">
<span id="field"><span id="field-name">Invisible Text:</span><span id="field-in" contenteditable>Test</span></span>
</div>
The text color only changes when I hover over the text. I want the text color to change to white when I hover over the button.
Can anyone see where I am going wrong, please?
#callbtn {
border: 1px solid #507487;
background-color: white;
padding: 10px;
font-size: 20px;
color: #507487;
border-radius: 10px;
font-weight: bold;
text-align: center;
}
#callbtn:hover {
background-color: orange;
color: white;
border: 1px solid orange;
cursor: pointer;
}
#callbtn a {
color: #507487;
}
#callbtn a:hover {
color: white;
}
#media screen and (max-width: 768px) {
#callbtn {
font-size: 14px;
}
}
#callbtn i {
padding-right: 10px;
}
<p class="m-2 text-center" id="callbtn"><i class="fas fa-phone-volume"></i>Call</p>
Your CSS need to apply the color on hover of the button, not the hover of the link
#callbtn:hover a {
color: #FFF
}
callbtn:hover triggering when the button is hovered over, and a:hover is triggering when the link is hovered over. Which is why this is happening, you are hovering over the button but not setting the colour of the link. The CSS below will set a style to the child link when button is hovered over.
#callbtn:hover a {
color: white;
}
It would be more efficient to set your button up like this:
.callbtn {
display: block;
border: 1px solid #507487;
background-color: white;
color: #507487;
padding: 10px;
text-decoration: none;
border-radius: 10px;
text-align: center;
font-weight: bold;
font-size: 20px;
}
.callbtn:hover {
border: 1px solid orange;
background-color: orange;
color: white;
}
.callbtn i {
padding-right: 10px;
}
#media screen and (max-width: 768px) {
.callbtn {
font-size: 14px;
}
}
<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet"/>
<a class="callbtn" href="tel:+441225xxxxxx">
<i class="fas fa-phone-volume"></i>Call
</a>
It's a bit weird but some JavaScript solves the problem:
var callButton = document.body.querySelector("#callbtn");
var callButtonLnk = document.body.querySelector("#callbtn a");
callButton.addEventListener("mouseover", function(){
callButtonLnk.style.color = "white";
})
callButton.addEventListener("mouseout", function(){
callButtonLnk.style.color = "#507487";
})
I've been trying to customise an icon to show a logo in my header, but I don't know how to set up correctly my css file for this. I'm using Bootstrap, and the logo is stored in my static folder: /static/img/logo.jpg
First of, my code loads the bootstrap css file first, then my custom css file.
Then my html file references this:
...
<div class="page-header" >
<div class="container">
<h1><i class="icon-logo"></i></h1>
...
My css file so far contains this:
...
.page-header {
height: 60px;
margin-top: 0px;
background: red;
color: black;
font-size: 15px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
z-index: 11;
}
.container {
width: 100;
height: 100;
}
.container h1 {
display: inline-block;
position: relative;
top: 0;
color: white;
font-size: 20px;
line-height: 20px;
font-weight: normal;
}
a {
position: center;
color: white;
text-decoration: none;
}
a:hover {
color: white;
text-decoration: underline;
}
...
What should I add to the css file to customise and display the logo?
I don't understand what exactly you wan't to do.
If you want the style the icon, just apply your CSS to that : .page-header .container h1 a i
But I think you wan't to replace the icon, so if you wan't to display your logo, and then style it, you could set your html like that :
<div class="page-header" >
<div class="container">
<h1><a href="https://mywebsite.com"><img src="/static/img/logo.jpg" alt"logo">
</a></h1>
</div>
</div>
And then apply your style to .page-header .container h1 a img
And it should be fine.
I have created a button like feel on a href element. I have added a tabindex on it so that when user uses tabs keys he lands on the button.
Scenario: User clicks on button and takes the mouse out. The active style still remains until clicked outside. If i remove the tab index and test after user clicks and takes the mouse out the effect is gone which is right?
How can i achieve the same even when tab index is there?
<a class="button" tabindex="0">CALCULATE</a>
.button {
background-color: rgb(13, 93, 166);
display: inline-block;
padding: 20px;
border: 1px solid blue;
}
.button:active, .button:focus, .button:hover {
background-color: rgb(96, 178, 212);
}
https://jsfiddle.net/f2ywgcnr/
Just remove the focus and you are good to go.
Just overwrite the focus in case it is in base class.
.button {
background-color: rgb(13, 93, 166);
display: inline-block;
padding: 20px;
border: 1px solid blue;
}
.button:active,
.button:hover {
background-color: rgb(96, 178, 212);
}
/* Overrite the focus */
.button:focus {
background-color: none;
}
<a class="button" tabindex="0">CALCULATE</a>
Just CSS not tested I think it will not meet your desires
I think you should write jquery / javascript.
You can consult:
http://jsfiddle.net/S7kJ2/
$('.button').click(function(){
if($(this).hasClass('active')){
$(this).removeClass('active')
} else {
$(this).addClass('active')
}
});
.button {
float:left;
color: #333;
width: auto;
text-align: center;
padding: 0 10px;
background: #f0f0f0;
line-height: 1.5em;
height: auto;
}
.button.active {
background: #ea0000;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="button ">My button</div>
or
Keep button in active state until clicked upon again