I don't know why my input element doesn't change color when hovering
<input
id='running'
className={filterButtonsSytles.button}
style={{backgroundColor: this.state.running ? 'grey':'white'}}
type="button"
value="Bieganie"
onClick={(e)=>this.clickHandler(e)}
/>
css
.button {
border: 1px solid black;
cursor: pointer;
}
.button:hover {
background-color: grey;
}
You have to give !important flag on hover because your style in in react element is inline style and inline style does not let override by any external css
To make this right
.button:hover {
background-color: grey!important;
}
To make it more precise !important is not recommended . you should be using classes for this.
Related
Is it possible to hide the input field in the primeng calendar, and show only the icon? I don't want to change the p-calendar element to inline, but just display the icon that will pop up the calendar.
component.html
<div class="ui-g-12 ui-md-4">
<p-calendar class="foo-cal" appendTo="body" readonlyInput="true" dateFormat="yy/mm/dd" [(ngModel)]="date" [showIcon]="true"></p-calendar>
</div>
I tried the following, but no success:
body .ui-calendar.ui-calendar-w-btn .ui-inputtext {
display: none !important;
}
p-calendar span input {
display: none !important;
}
However, with the devtools in the browser if I add the display: none; property to the element, it will hide leaving the icon only. Any ideas how can I make this to render the html file without the input field?
You just need to create a custom style for the p-calendar component
<div class="ui-g-12 ui-md-4">
<h3>Icon</h3>
<p-calendar styleClass="only-icon" [(ngModel)]="date" [showIcon]="true"></p-calendar>
</div>
style.scss
.only-icon {
.ui-inputtext{
display: none;
}
button.ui-datepicker-trigger.ui-calendar-button {
border-radius: 4px !important;
}
}
demo ⚡⚡
apply this style to all componnt without any custome class
p-calendar {
.ui-inputtext{
display: none;
}
button.ui-datepicker-trigger.ui-calendar-button {
border-radius: 4px !important;
}
}
the style above gone to apply to a p-calendar to all project.
I think if you set display none for input , users can't see calendar when click in there but you can use this css code for input and show your icon as image in background-image.
input{
border: none;
background-image: url(your-icon-address);
color: transparent;
text-shadow: 0 0 0 #fff;
cursor:pointer;
/*width:somthing; if you need*/
/*height:somthing; if you need*/
}
input:focus{
outline:0;
}
you can set width and height input same as icon.
I am trying to add custom css style to my caldera forms on a wordpress website.
what i am trying to achieve is to add a hover style to my fields of radio checklist
Right now i was only able to add style to the bullets ,I am currently stuck with adding a hover style to the fields
this is the link to the form
https://purdywordy.com/order-here/
This is the CSS that i have used
.caldera-grid input[type=checkbox]:hover,
.caldera-grid input[type=radio]:hover {
cursor: pointer;
}
input[type=radio]:before,
input[type=checkbox]:before {
font-family: FontAwesome !important;
font-size: px;
}
input[type=radio]:before {
content: '\f111';
border-radius: 50%;
padding: 0px 15px 0px 0px;
}
input[type=checkbox]:before {
content: '\f14a';
color: red;
background: red;
border-radius: 3px;
padding: 2px;
}
input[type=radio]:checked:before {
color: red;
}
When inspected, your form (HTML) is structured like this:
<div class="radio">
<label>
<input type="radio">
</label>
</div>
Since you have used nested input inside of a label, you don't even need for/id attributes, but I am guessing that is automatically generated by the form. Btw, do you have control over the structure of HTML or the proposed form simply spits it out?
For your current structure, you could style it like this:
.radio:hover > label {
/* add the style for the label */
}
.radio:hover input[type="radio"] {
/* add the style for the radio button */
}
Whatever you need to apply the style to, "listen" for a hover on the parent and then target its direct children. You get the point.
EDIT: My bad. I have said that input is nested inside of label. Therefore, radio:hover > input will not target it. Omit the > and it will target any input inside div with the class .radio. Sorry for the possible confusion. You can learn more about CSS selectors and differences between them here.
This should work. Your radio buttons and labels sit inside a class of 'radio'. You can remove the .form-group reference here unless there are other places on the page that you don't want this styling to apply to.
.form-group .radio:hover {
cursor: pointer;
background-color: grey;
border: 2px solid blue;
border-radius: 5px;
// other hover properties
}
So I've got the following:
paper-button{
color: red;
background-color: blue;
}
paper-button:hover{
color: blue;
background-color: red;
}
Anyway, the button text correctly displays as red, and when hovered the text correctly shows blue and the background correctly shows red, but when it's not hovered it's white, not blue. I've also tried:
--paper-button-background: blue;
and
background-color: blue;
with no success. the button is the following:
<paper-button raised noink>raised</paper-button>
Why can't I style the background-color?
UPDATE
So as suggested when I add a class and select that class instead of selecting all paper-buttons it works, but it removes the text (or makes it the background color), but only when I add the class css code does it also remove the text from a paper-button without the class, which is even more confusing... When I remove the code that only selects the paper-buttons with the right class, then the paper-buttons without that class don't have the removed text bug.
Change background-color to background.
.paper-button{
color: red;
background: blue;
}
.paper-button:hover{
color: blue;
background: red;
}
<input type="button" class="paper-button" value ="click">
You will create the css class and you can use this css
like this
.paper-button{
color: red;
background: blue;
padding:16px 32px;
}
.paper-button:hover{
color: blue;
background: red;
padding:16px 32px;
}
<input type="button" class="paper-button" >
Ok so it's a stupid answer but I found it. You have to embed the css in html like so:
<style is="custom-style"> </style>
You can't have a separate style sheet:
<link rel="stylesheet" href="styles.css">
I don't know why you can't add the is="custom style" to the linked sheet, but that's the solution.
paper-button{
color: red;
background: blue;
padding:16px 32px;
}
paper-button:hover{
color: blue;
background: red;
padding:16px 32px;
}
<paper-button raised noink>raised</paper-button>
I have this CSS:
html.darkBlue .btn1 button:hover:not(.nohover) {
background: #0007d5;
border: 1px solid #0007d5;
color: white;
}
I am rather confused about disabled. How can I make it so that this CSS does not work if the button is disabled?
If you don't need to support IE < 9 you could use the :enabled pseudo class.
html.darkBlue .btn1 button:hover:enabled {
background: #0007d5;
border: 1px solid #0007d5;
color: white;
}
Try with (demo http://jsfiddle.net/JDNLk/)
HTML
<button class="btn1" disabled="disabled">disabled</button>
<button class="btn1">enabled</button>
CSS
html.darkBlue .btn1 button:hover:not([enabled="enabled"]) {
background: #0007d5;
border: 1px solid #0007d5;
color: white;
}
You can use the negation pseudo class selector (CSS 3). I am not sure if there is also a solution using attribute selectors (CSS 2.1).
Given this html
<div class="darkBlue">
<h2>disable hover for disabled buttons</h2>
<div class="btn2">
<button>hover enabled</button> <br/>
<button disabled="disabled">hover disabled</button>
</div>
</div>
and this css
.darkBlue .btn2 button:hover:not([disabled="disabled"]) {
background: #0007d5;
border: 1px solid #0007d5;
color: white;
}
you can achive that every button inside the matiching selector has no hover-style applied.
See this example.
At caniuse.com you can find tables that compare which browser supports which selector
browser support for css2 selectors
browser support for css3 selectors
Update using a hack to be able to use css2 selectors
This is a hack and is yet not exactly the same but in case you are restricted to css 2.1 this may be a starting point. If you define a seperate style-rule for disabled buttons and use the color that you picked for disabled buttons you can fake a disabled hover-style:
.btn3 button[disabled="disabled"]:hover
{
background-color: rgb(212, 208, 200);
color: rgb(128, 128, 128);
}
It worked for me after adding the ":enabled" selector as following :
element-class:hover:enabled {
properties...
}
Use the CSS :Not attribute selector to only target elements that don't have the disabled attribute.
html.darkBlue .btn1 button:not([disabled]):hover
That way your hover style will only be applied to buttons that are not disabled.
.btn:disabled:hover{color:default-color;background:default prop}
. or .btn:disabled{pointer-events:none}
I try to apply to buttons an elegant CSS style I found. I need to keep buttons for semantic/accessibility reasons. But my nice CSS is conflicting with the button elements' native CSS style, and loosing to it.
How to override the natural CSS of html buttons' elements ?
/* CSS works for buttonis, doesn't work for buttons*/
button.btn, buttoni.btn {
...
}
http://jsfiddle.net/bkWNw/3/
Edit: The buttons element should look exactly like the buttonis elements.
Either use a CSS Reset, or set the border and outline to none.
border: none;
outline: none;
http://jsfiddle.net/bkWNw/5/
Here's a complete CSS reset:
In CSS
.reset-style {
padding: 0;
border: none;
font: inherit;
color: inherit;
background-color: transparent;
cursor: pointer;
}
<button class="reset-style">This is clickable</button>
In JS:
export const resetButton = {
padding: 0,
border: 'none',
font: 'inherit',
color: 'inherit',
backgroundColor: 'transparent',
cursor: 'pointer'
}
On the latest browser you can also use -webkit-appearance: none -moz-appearance: none to remove the default styling from those elements. Demo: http://jsfiddle.net/faueK/
Just set border: none to get rid of that border.