I have the following button
<h:commandButton id="user" action="user?faces-redirect=true" styleClass="rightlogo"/>
and in my css the class
.rightlogo{
margin: 5px;
padding: 10px 5px 5px 5px;
border: 0px;
}
I want to style it using CSS so that on click, there won't be any border. Currently there is a blue border (like the one from a href).
Thanks !
try using .rightlogo:focus{
CSS
.rightlogo:focus{
outline:none;
border:none;
}
REMEMBER: if you are giving :hover,then :focus must come after :hover inorder for :focus to work
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/
Styled my checkboxes like buttons as suggested here in this article:
CSS: styled a checkbox to look like a button, is there a hover?
Now I've been trying to add some margin to the buttons. This won't work, as soon as the button is selected, only the area without margin is highlighted. This looks awfull...
#ck-button label span {
text-align:center;
padding:3px 0px;
display:block;
margin: 10px;
}
See here: http://jsfiddle.net/Vq759/
Anyone know how to solve this?
Thanks mates :)
I think you're overcomplicating things with your HTML/CSS, here's a quick re-do with how I'd style a checkbox (which is completely customizable to suit anything you need).
Simple HTML:
<input type="checkbox" value="1">
<label>Red</label>
I start styling the checkbox by simply hiding it:
input[type="checkbox"] {
display: none;
}
This leaves optional events/states like :checked intact.
From here I style the entire object to suit my needs, for example:
input[type="checkbox"] + label {
display:inline-block; /* or block */
line-height:normal;
cursor:pointer;
padding: 3px 14px;
background-color: #EFEFEF;
border-radius: 4px;
border: 1px solid #D0D0D0;
margin: 40px 100px 10px 40px; /* however you please */
}
/* hover event */
input[type="checkbox"] + label:hover {
border-color: #000;
background-color: #911;
color: #fff;
}
/* checked checkbox */
input[type="checkbox"]:checked + label {
border-color: #000;
background-color: #888;
color: #fff;
}
Margin works flawlessly.
Fiddle: http://jsfiddle.net/8e5Xa/
If you are trying to make the button essentially bigger and still make the whole thing highlight onClick, use padding instead of margin:
#ck-button label span
{
padding: 10px;
}
Margin puts white-space around an element. Padding puts white-space within an element.
JSFiddle
The + operator in this selector:
#ck-button input:checked + span
.. does not function properly in older browsers. It sort of works, but has bugs when doing the kind of thing you're trying to do here (in particular, changing the :checked state of the adjacent element). Sorry, but what you're trying to do is impossible if you want all browsers to be supported.
You will need to use JavaScript if you want the text colour of the span to change when selected in all browsers.
Alternatively, you could pick a colour scheme where it looks OK if the span doesn't change colour, but do change the colour in browsers that support it.
If it changing the margin of the button, do this:
#ck-button {
margin:40px;
background-color:#EFEFEF;
border-radius:4px;
border:1px solid #D0D0D0;
overflow:auto;
float:left;
}
Also have a look at this:
This is the box-model for every HTML element
I know select boxes are a bit of a pain to style with css, but without resorting to advanced techniques is there anyway I can add some padding to push down the text a bit without it also adding padding to the arrow on the right hand side?
add this to your CSS class. Maybe this helps?
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
Since select boxes appear differently on different browsers and especially operating systems, you cannot guarantee a consistency.
For example, the minimal amount of formatting I can do on a mac is this:
select { height:40px; background:transparent; }
And it looks like this:
#Demilio's answer is great for hiding the default selectbox. With custom styling you can then change the appearance of the selectbox as you wish.
The only remaining problem is the arrows/caret which are also gone, as mentioned by #romainnm.
Unfortunately pseudo elements (e.g. :after) don't work on a select element, so the only way around it is to create an actual element after the select, something like <div class="Caret"></div>.
Add some stylying:
.Caret {
display: block;
position: absolute;
cursor: pointer;
right: 1rem;
top: 50%;
margin-top: -1px;
width: 0;
height: 0;
border-top: 5px solid #000;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
And this should result in a custom styled select box with arrows:
Unfortunately the only downside is clicking on the arrow won't open the selectbox, and that also doesn't appear to be possible to tackle with JavaScript.
Interesting test here
http://cssdeck.com/labs/styling-select-box-with-css3
The author covered the arrow on the right hand side and created its own, using vendor prefixed css to target different browsers. after doing that, your padding is all free.
You can use border to add padding to your select element and outline for adding the border itself
.select {
border: 12px solid #FFF;
outline: 1px solid #000;
}
taking that you have a white background, this will work as 12px padding but it also adds padding to the arrow
select {
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
-webkit-appearance: none;
background-position-x: 97%;
}
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]-->
How do I square the corners of a submit button? Can it be done with CSS? I just noticed that Stackoverflow buttons are pretty much the same thing (don't close it for mentioning SO, just want to illustrate what I mean).
Use the following field and command in your css:
border-radius: 0;
Just add CSS to it, and the default look will dissappear.
input.button, input.submit {
border: 1px outset blue;
background-color: lightBlue;
}
edit: changed the selector to use class name instead, as suggested in comments.
You could use the HTML element instead of input type. It's quite easy to style that one.
If you specify the height and width in the css, you'll make the corners square, and retain the certain level of automatic fancy-ness that normal buttons have... and that way, you wont have to build your own.
input.button, input.submit {
height: 30px;
width: 20px;
}
I seem to remember this only working if the height is large enough, but it might work any which way.
Use border: 1px solid for the element.
<a class="test">click me</a>
<style>
.test
{
cursor: pointer;
background-color:#E0EAF1;
border-bottom:1px solid #3E6D8E;
border-right:1px solid #7F9FB6;
color:#3E6D8E;
font-size:90%;
line-height:2.2;
margin:2px 2px 2px 0;
padding:3px 4px;
text-decoration:none;
white-space:nowrap;
}
</style>
This is how a stackoverflow button is made.