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.
Related
I'm working on a React project and I have button that is in Link (react-router dom). So to edit the css of the button i need to add "a." before the class:
<Link to={'/Register'} className="btn">Sign up</Link>
In the css:
a.btn {
background-color: var(--lighter-hover-color);
color: white;
padding: 10px 25px;
margin: 15px 0;
border: none;
cursor: pointer;
border-radius: 20px;
border: 1px solid var(--hover-color);
text-decoration: none;
}
So when i try to add hover function to this class:
a.btn :hover {
transform: scale(1.2);}
Nothing happens. So my question is is there any way i can make the hover to work. The problem i found is that when i have dot (.) , that makes the hover function unusable.
It is not working because you can not target Link react component using a tag.
I would just get rid of a.btn and just use btn:hover.
A better and more elegant approach to style react elements is to user either styled-components or css modules.
refer this article to learn more about different ways of styling react app
https://css-tricks.com/different-ways-to-write-css-in-react/
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.
The code in my stylesheet I used to change the color of a selected button isn't working. The hover function works but it won't keep the color after being selected.
My code is below. I don't know enough about CSS to really troubleshoot all that much.
body .btn:hover,
body .MS_contentWrapper_inner .PaymentPartSubmitButton:hover,
body .MS_contentWrapper_inner [id*='AddProgramDailyAdmissionToCart']:hover,
input[type="submit"]:hover,
.BBFormSubmitButton:hover,
#anchorOtherDates:hover,
#anchorOtherTimes:hover,
.Programming_Event_AlternateDatesCaption:hover,
.Programming_Event_AlternateTimesCaption:hover {
background: #E77229 !important;
color: #fff;
text-decoration: none;
border: none !important;
}
body .btn:active,
body .MS_contentWrapper_inner .PaymentPartSubmitButton:active,
body .MS_contentWrapper_inner [id='AddProgramDailyAdmissionToCart']:active,
input[type="submit"]:active,
.BBFormSubmitButton:active,
#anchorOtherDates:active,
#anchorOtherTimes:active,
.Programming_Event_AlternateDatesCaption:active,
.Programming_Event_AlternateTimesCaption:active {
background: #E77229 !important;
color: #fff;
text-decoration: none;
border: none !important;
}
The top half of the code works great but the second half changes nothing.
If you really need the color to stay after you clicked the button you need to set the style dynamically on click. I suggest using a css class for this which you can use to set any style you want.
Example:
HTML:
<input type="submit">
CSS:
.active {
background-color: deeppink;
color: white;
border: none;
}
JS:
document.querySelector('input[type="submit"]').addEventListener('click', (e) => {
e.target.classList.add('active');
});
I'm using the following code to change my website's cursor (SASS):
body {
cursor: url(../images/cursor.png), auto;
a {
color: grey;
text-decoration: none;
&:hover {
cursor: url(../images/cursor.png), pointer;
color: black;
}
}
}
I'm using Chrome as my browser, and for some reason, no matter what I try, I keep seeing this jitter happening when I hover on an <a> tag:
I have a suspicion that Chrome's default cursor is causing this but I can't quite figure it out.
Is there a way solve this jitter?
Move the cursor outside of the :hover pseudo-selector
I have a CSS rule for input like this:
input {
border: 1px solid black;
}
The problem is that checkboxes in IE (have tested on IE 8 and 9) and Opera also inherit this border and instead of showing the default style they show their custom mode for checkboxes with white background and black checks like this:
instead of the native style, like in Windows 7 with gradient-grey background and dark blue checks that are shown in Chrome and Firefox:
I would like to keep the border for the input-rule in the CSS, but I have a class called "checkbox" that I put on all checkboxes like this:
<input type="checkbox" class="checkbox" />
Is there any way to reset the border style with the .checkbox rule?
I have tried:
.checkbox {
border: none;
}
which works in Opera to revert to the default style, but not in IE. I have also tried many different combinations of:
.checkbox {
border: 1 none transparent;
}
but none of these seems to reset to the default style of the checkboxes in IE.
Is it possible to revert the default style for checkboxes in IE do without removing the border for the input-rule and instead use the .checkbox class?
In many browsers, it's not possible to reset the checkbox back to the default native style.
This is probably the reason why CSS resets generally do not include a rule to this effect:
input {
border: 0;
}
The most compatible technique is to do this:
input[type="text"], input[type="password"] {
border: 1px solid black;
}
and explicitly list every type of input you wish to style.
See: http://jsfiddle.net/EPpJ9/
This will work in IE7+ and all modern browsers.
You could also do this more neatly with the not() CSS3 pseudo-class, but that doesn't work in IE8, which is a deal breaker for me:
input:not([type="checkbox"]) {
border: 1px solid black;
}
In case you are still wondering there is indeed a way to style checkboxes and have it work in most browsers including IE. And you only need some css and just a little javascript and jquery. Works in IE6+
First make your checkbox like this.. Only add a label element with the for element pointing to the id of the checkbox.
<input id="mycheckbox" type="checkbox">
<label id="mylabel" for="mycheckbox"></label>
Next include some css:
#mycheckbox {
display: none;
}
Draw your checkbox using your label control, here is one I made:
#mylabel {
float: left;
margin-top: 11px;
background-color: #fff;
border: 1px solid #000;
display: block;
height: 12px;
width: 12px;
margin-right: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
background-position: left center;
}
You have to create a look for when the box is checked:
#mylabel.checked {
background-color: #808080;
}
Finally some jquery:
$(document).ready(function () {
$("#mycheckbox").change(function () {
if ($("#mycheckbox").is(":checked")) {
$("#mylabel").addClass("checked", "checked");
} else {
$("#mylabel").removeClass("checked");
}})
});
Don't forget to include the jquery libraries (put this in your head tag):
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Check out the fiddle to see it in action:
fiddle
Couldn't you include ie8-js to make IE8 recognize not() CSS3 pseudo-class?
http://code.google.com/p/ie7-js/
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->