I have a child component which has several tabs with the following CSS property:
a {
padding: 7px 14px;
display: inline-block;
text-align: center;
text-decoration: none;
cursor: pointer;
&:hover,
&:focus {
background-color: pink;
border-bottom: 2px solid red;
}
}
When I click on back button it goes back to the previous selected tab which is fine but the focus is not removed from the current one unless I click on any other part of the screen.
How to remove the focus?
I think, I have a different solution for that you can set your on navigate back using
document and id. Here is a sample code below=>
HTML:
<input id="abc">
<button (click)="mySetDefaultFocus()">Set Focus</button>
TS:
mySetDefaultFocus(){
document.getElementById(`abc`).focus();
}
Note: You can call that method mySetDefaultFocus on navigate change or ngInit.
Related
I need a link on the text ”[[phone]]” Which appears the first time you press the button. The link should be ”tel:[[phone]]” to be able to click on a phone number and call it directly.
function change() {
document.getElementById("myButton1").value = "[[phone]]";
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
<input onclick="change()" type="button" class="button" value="Visa nummer" id="myButton1">
You can use window.open() in your click() -function, that way you can use any element.
'_self' is so it opens the link in the same window.
window.open('tel:123456789', '_self');
Similar question: how to call a phone number through javascript without using <a> tag?
Any ideas on how i can execute this?
button {
background: #1c00b5;
width: 100px;
border: none;
outline: none;
color: #fff;
height: 35px;
border-radius: 30px;
margin-top: 20px;
box-shadow: 0px 5px 15px 0px rgba(28,0,181,0.3);}
i have tried to add "body .contact button" to let css file know it is the contact us page i am editing but it wont work it only goes to change the style on my other pages aswell so essentially.
body .contact button {
background:
but this doesnt work, any ideas how i can change the style of this button without affecting the others in my css file?
The .contact does not mean the contact page but instead refers to a class called contact.
You could give each of the buttons a different class for example if you wanted one to be red and the other blue:
HTML page 1:
<button class="button-red">This is a red button</button
HTML page 2:
<button class="button-blue">This is a red button</button
CSS file:
.button-red {
background-color: red;
}
.button-blue {
background-color: blue;
}
Just change the colours to your own styling.
Hope this helps.
You really need to search online for 'CSS selectors' and learn how and why to use them.
An example: create CSS rules that are true for all button and create exceptions to those rules using specific selectors. E.g. all buttons are green, except a contact button is red.
The generic rules can be put in a separate CSS file and <link>ed in a document. Create the specific rules in-document with a <style> block to override/modify/add to the linked generic rules.
There are many alternative ways to solve your issue, this is just one of them...
Tip: CSS rules are nothing more than an eleborate list of logical statements varying from easy to virtually unexplicable selectors to modify the style of your document:
if selector,
list-of-selectors,
very-special-selectors
what-does-this-one-do?!?-selector then { property: value }
example
/* put this in an external CSS file */
button { background-color: green }
/* put this in a <style> block */
button.contact { background-color: red }
<button>generic 1</button>
<button>generic 2</button>
<button>generic 3</button>
<br>
<button class="contact">contact</button>
Suppose we have a button
<button> your text </button>
and we ave to use this CSS/style
background: #1c00b5;
width: 100px;
border: none;
outline: none;
color: #fff;
height: 35px;
border-radius: 30px;
margin-top: 20px;
box-shadow: 0px 5px 15px 0px rgba(28,0,181,0.3);
so, we will add a id to button like
<button id="contact-btn"> your text </button>
and then add style using id selector
#contact-btn{
background: #1c00b5;
width: 100px;
border: none;
outline: none;
color: #fff;
height: 35px;
border-radius: 30px;
margin-top: 20px;
box-shadow: 0px 5px 15px 0px rgba(28,0,181,0.3);
}
it will work thanks
I am trying to add a CSS button to my code, but the background colour of the button is not changing.
Here is my CSS code for the button:
.button {
background-color: red;
border: solid;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline;
font-size: 16px;
-moz-appearance: button;
-webkit-appearance: button;
text-decoration: none;
}
Here is the HTML code I currently have:
<div>
Click here
</div>
The background of the button remains the standard white colour no matter what I set the background-color to. This is the current button, but I would like to change the background.
This is exactly your code. How you can see it works.
I think in your project is another CSS which overwrites your background-color.
You can use the developer tools (F12) to check which part of your CSS is responsible for the background-color.
chrome dev tools (inspecting html)
chrome dev tools (inspecting css)
.button {
background-color: red;
border: solid;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline;
font-size: 16px;
-moz-appearance: button;
-webkit-appearance: button;
text-decoration: none;
}
<div>
Click here
</div>
Override other css:
.button{
background: red! important
}
Either your CSS is being overridden by another class that you haven't showed us or your browser is caching the incorrect result. If you are using Chrome:
Right click your page and click "Inspect"
In Inspector there should be a "Network" tab listed. Click it.
Inside of that tab, there should be a checkbox for "Disable Cache". Check it
Refresh your page with this option checked.
If that doesn't work then it is likely being overridden somewhere.
Yes. There's nothing wrong with the code. Maybe you shouldn't have rendered your css properly or used the same class name for lot of elements. I've also tried it with your code. It's good.
.button {
background-color: blue;
border: 2px solid red;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline;
font-size: 16px;
-moz-appearance: button;
-webkit-appearance: button;
text-decoration: none;
}
<div>
Click here
</div>
how could add css style to this button.
Button html:
<html>
<body>
<button onclick="myFunction()">Player</button>
<script>
function myFunction() {
alert('what ever');
}
</script>
</body>
</html>
CSS i want to add
<style>
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
If there is answered question, please send link. Thank you
You could add class="button" to the button to make it work. Cause your CSS .button will be used on every element which has the class="button"
function myFunction() {
alert('what ever')
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
<button class="button" onclick="myFunction()">Player</button>
Read more about how CSS Selectors work here
<button class="button" onclick="myFunction()">Player</button>
As your button class you've set it ".button" add "button" as a class like above
Anything you put after the . will match the name of the class in the element
https://css-tricks.com/the-difference-between-id-and-class/ explains how you use classes, ids and what they do in good detail
In your case, you're two solutions :
First : use classe, if you've differents buttons in your pages :
you can just add class attribute in your HTML element like that :
<html>
<body>
<button class="btn" onclick="myFunction()">Player</button>
<script>
function myFunction() {
alert('what ever');
}
</script>
</body>
</html>
And define the style in your class in your CSS :
<style>
.btn {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
Second : If all buttons are the same style, you can just add style for all element button :
Not change your HTML :
<html>
<body>
<button onclick="myFunction()">Player</button>
<script>
function myFunction() {
alert('what ever');
}
</script>
</body>
</html>
But, in your CSS, just change the reference, for select elements button :
<style>
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
You can learn more explain about selector (.myClass, #myId, element) here in the mozilla developper website.
Don't forget, for optimize your web code, use as little code as possible, for reduce weight of pages, and to correctly use the different selectors (classes or id as not mandatory for CSS style : that depend to your utility) :)
Instead of declaring class button i.e(.button) you can apply style to all button elements.
Demo- https://jsfiddle.net/akshay193sw/bxm8wdqk/ Refer link
If you want to style a button I recommend adding a class to it and styling it with CSS. Here is an example below.
HTML Below
<button class='button_thing'> My Button </button>
CSS Below
.button_thing {
background-color: blue;
width: 180px;
height: 100px;
border-radius: 10px;
}
So what the CSS and HTML code above will do is it will create a blue button with a curved border and with a height of 100 pixels and width of 180 pixels. Now, the next question you might ask is how do I make an animation on the button when I hover over it?
CSS Hover Animations are a bit tricky at the start but get easier with practice. When I make buttons for my websites I like to use a site called ButtonAnimations because it gets straight to the point and gives me tons of animations (with HTML & CSS code) to choose from. Totally recommend it because it simply provides you with amazing buttons and animations that you can just copy and paste into your code. ButtonAnimations Website Link: ButtonAnimations - Create Spectacular Button Animations with HTML 7 CSS
I have problem with using animation in css and event handler in JS.
I have to specific styles for my button (normal and with :active suffix). This solution let's me simulate 'clicking button'. In Html(this is angular directive) I have directive ng-click on that button but it only runs event when I click body of a button not border. But my css sets pointer on the border and there is animation an on clicking border too.
I am looking for the best practice/solution to repair that incident. Maybe I must leave css style with active suffix or add something to my styles.
CSS
#addButton {
padding: 5px;
float: left;
background: linear-gradient(#92AFDE, #668FED);
border: solid 2px #14438F;
margin-left: 10px;
border-radius: 10px;
font-size: 20px;
cursor: pointer;
}
#addButton:ACTIVE {
transform: translateY(4px);
}
HTML
<div class="card">
<img ng-click="selectCard()" style="width: 150px; height: 200px;" ng-src="cards/\{{cardId}}.png"></img>
<button ng-click="addCard()" id="addButton">Add<div class="count">0</div></button>
<div id="delButton">X</div>
</div>
Because when you specify border it comes after the actual width of the element.
Use
#addButton{
box-sizing:border-box
}
This css property will merge the border space in actual width.
Faced the same issue on a project I am developing. I used the above answer https://stackoverflow.com/a/38826326/7622397. But it didn't work. Clicking on border does not fire the click event. But it's important to add box-sizing: border-box (as mentioned in the answer) to make sure the below mentioned workaround works
The reason mentioned in the comment seems to be correct
OK i know where is the problem. If i click on the button the "activate" suffix moves the button down and browser don't notice click on this button because pointer is outside my div (after moving)
As a workaround, I created a div outside the button, gave a padding-top css (value is same or greater as the height of translateY) and give the onClick event to the div and not the button. I know, it's not a tidy fix, but it certainly works.
Code for reference
.sw-form-button-card {
padding: 5px 10px;
text-decoration: none;
background: #668ad8;
color: #FFF;
border: none;
box-sizing:border-box;
border-bottom: solid 3px #627295;
border-radius: 3px;
cursor: pointer;
}
.sw-form-button-card:active {
-ms-transform: translateY(2px);
-webkit-transform: translateY(2px);
transform: translateY(2px);
border-bottom: none;
}
HTML part:
<div data-bind="click: () => openDDDialog()" style="padding-top: 5px;">
<button class="sw-form-button-card">
<span style="font-size: 15px;" data-bind="text: 'Button text'"></span></div>
</button>
</div>