Is there a way to use css or jquery to create a simple border around focused form field. I would like something similar to Groupon's login page.
I checked the console in Chrome and they aren't doing anything special to the input on focus. They aren't changing the class or the inline style. Here's the user agent style for input for webkit-based browsers:
input, input[type="password"], input[type="search"], isindex {
-webkit-appearance: textfield;
padding: 1px;
background-color: white;
border: 2px inset;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
cursor: auto;
}
input, textarea, keygen, select, button, isindex, datagrid {
margin: 0em;
font: -webkit-small-control;
color: initial;
letter-spacing: normal;
word-spacing: normal;
line-height: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: -webkit-auto;
}
I hope this gives you an idea of how it works, but I think it's just general behavior of the browser.
Related
I have styled an oval button and it in an a element with the class .button
It works and looks great on firefox, but I get a rectangular button in Chrome, without a border. The link still works but the border and border-radius seems to be misunderstood.
This is the CSS:
a.orange-circle-button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
box-shadow: 0 6px 9px 0 rgba(0,0,0,0.4);
border: .5em solid #00667e;
font-size: 1.2em;
text-transform: none;
text-align: center;
font-family: "lato", sans-serif;
line-height: 3em;
color: #ffffff;
background-color: #283f72;
margin: auto;
display: block;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-khtml-border-radius: 50%;
height: 4em;
width: 12em;
position: relative; }
Here is the HTML:
Current Stock
This is it in the wild: https://www.frontiercomputercorp.com/
I am assuming I've done something wrong with the border-radius that's unique to chrome, but I'm not skilled enough to know if it's being caused by the way I'm calling the class.
To recap: In firefox the button is oval (as I wanted)
In Chrome it is rectangular
HeLP!
Remove the following lines and it will be fixed:
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
I tested it in Chrome and it fixed the problem.
The appearance property is used to display an element using a platform-native styling based on the users' operating system's theme.Therefore it overrides your border-radius code as Chrome natively doesn't set border-radius for the button. By not to adding appearance or setting it to none, you won't have this problem in Chrome too.
Just delete these lines below:
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
<a> is a clickable type of element. A hyper-link. display: block will do what you want here.
"The appearance property is used to display an element using a platform-native styling based on the users' operating system's theme."
(I think they are still ugly, but that's not the point here :) )
Here's the CSS now:
a.oval-box{
box-shadow: 0 6px 9px 0 rgba(0,0,0,0.4);
border: .5em solid #00667e;
font-size: 1.2em;
text-transform: none;
text-align: center;
font-family: "lato", sans-serif;
line-height: 3em;
color: #ffffff;
background-color: #283f72;
margin: auto;
display: block;
border-radius: 50%;
-webkit-border-radius: 50%;
height: 4em;
width: 12em;
position: relative; }
a.oval-box:hover {
color:#ffffff;
background-color: #f00667e;
text-decoration: none;
border-color: #f89520;}
I started this with a button so I got stuck thinking button. But as you have pointed out, it's just a styled block and I don't need the button comand at all.
Thanks.
How do I exclude pseudo-elements like :before and :after from being changed by selectors like for example: :hover?
Maybe there's some sort of 'main pseudo element' that I'm not aware of?
I've tried using CSS3 :not() statement but this didn't work.
Using: .facebook:hover:before {color: black;} works fine, but I'm sure that there's a better solution.
Example:
I want the Facebook logo to remain black and change the texts color.
body {
background: #F7F7F7;
margin: 0px;
}
.share-button {
background: #FFFFFF;
border: 1px solid #D8D8D8;
display: inline-block;
font-family: 'Open Sans';
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2px;
margin: 0px;
padding: 12px 24px 12px 12px;
transition: color 1s;
}
.facebook:before {
display: inline-block;
height: auto;
font-family: 'FontAwesome';
font-size: 12px;
padding-right: 12px;
width: auto;
content: '\f09a';
}
.share-button:hover {
color: #374D8D;
}
<button class="share-button facebook">
Share on facebook
</button>
The problem here is not that the pseudo-element is being "matched" by the :hover selector per se, but that it is inheriting the color property from the corresponding CSS rule on the element.
That is the reason why you need to set it explicitly on the :before pseudo-element — you cannot block inheritance using a selector, or using a style on the parent or originating element.
I'm trying to add border-radius to an input submit button, but when I do, Chrome is also adding a grey background colour and a box shadow.
How can I just use border-radius to round the corners, and keep the background colour white, and have no box-shadow?
Here's my HTML:
<input type="submit" id="nm-match" class="nm-button" value="Match" />
And my CSS:
.nm-button {
border-radius: 5px;
}
Here's a demo of the problem: http://jsfiddle.net/CJg43/3/
Use your inspector on chrome and scroll to the element .m-button. (for the quickest way right click directly on the button and say inspect element) If you look on the Elements tab (which should be the first one popped up and look on the right side at the styles section it will show all the css styles being applied to that element whether they were put there by you or by chrome (the cool thing about this styles section is the styles are in order of precedence so you can easily tell which styles overwrite which (that being the higher styles overwrite the lower ones)) or even if they are the default for an element (example display: block; are always on block level elements like divs.) This is a handy tool.
So if you do this in your case you will see that chrome applies different styles to input styles. These are mostly being applied because the input[type="submit"]. If you want to overwrite these styles for the most part just overwriting the same styles in your class on your button should suffice. adding the following should be fine if you only want to overwrite the styles for the background color the "box-shadow" (which it's actually the border that is creating that shadow so just add a new border)
.nm-button {
border-radius: 5px;
background-color: #fff;
border: 1px solid #ccc;
}
Also since it's a button suggest something like the following code so it looks clickable.
.nm-button:hover {
background-color: #ddd;
cursor: pointer;
}
Here are the styles put there by chrome in your case. It's alot but chrome also is very minimalistic in it's approach so that all of this is easily overwritable. (P.S. I hope this helped, feel free to leave a comment if you have any questions.)
input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
padding: 1px 6px;
}
user agent stylesheetinput[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
align-items: flex-start;
text-align: center;
cursor: default;
color: buttontext;
padding: 2px 6px 3px;
border: 2px outset buttonface;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background-color: buttonface;
box-sizing: border-box;
}
user agent stylesheetinput[type="button"], input[type="submit"], input[type="reset"] {
-webkit-appearance: push-button;
white-space: pre;
}
user agent stylesheetinput, input[type="password"], input[type="search"], isindex {
-webkit-appearance: textfield;
padding: 1px;
background-color: white;
border: 2px inset;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
cursor: auto;
}
user agent stylesheetinput, textarea, keygen, select, button, isindex {
margin: 0em;
font: -webkit-small-control;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
}
user agent stylesheetinput, textarea, keygen, select, button, isindex, meter, progress {
-webkit-writing-mode: horizontal-tb;
}
The following code works fine everywhere apart from the iPad where the text inside the button is broken in two lines:
.sign_up {
background: url('../images/submit_button.png') no-repeat 0 0;
border: 0;
text-align: center;
color: white;
text-transform: uppercase;
font-size: 14px;
cursor: pointer;
margin-left: 12px;
width: 110px;
height: 34px;
}
the sign_up class has been given to the button element which contains "add others" as text.
However, on the iPad, "others" ends up being on the second line.
Reset the iPad button default style with -
button, input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
Add in css white-space:nowrap;
I need to make a button look like a link using CSS. The changes are done but when I click on it, it shows as if it's pushed as in a button. Any idea how to remove that, so that the button works as a link even when clicked?
button {
background: none!important;
border: none;
padding: 0!important;
/*optional*/
font-family: arial, sans-serif;
/*input has OS specific font-family*/
color: #069;
text-decoration: underline;
cursor: pointer;
}
<button> your button that looks like a link</button>
If you don't mind using twitter bootstrap I suggest you simply use the link class.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<button type="button" class="btn btn-link">Link</button>
The code of the accepted answer works for most cases, but to get a button that really behaves like a link you need a bit more code. It is especially tricky to get the styling of focused buttons right on Firefox (Mozilla).
The following CSS ensures that anchors and buttons have the same CSS properties and behave the same on all common browsers:
button {
align-items: normal;
background-color: rgba(0,0,0,0);
border-color: rgb(0, 0, 238);
border-style: none;
box-sizing: content-box;
color: rgb(0, 0, 238);
cursor: pointer;
display: inline;
font: inherit;
height: auto;
padding: 0;
perspective-origin: 0 0;
text-align: start;
text-decoration: underline;
transform-origin: 0 0;
width: auto;
-moz-appearance: none;
-webkit-logical-height: 1em; /* Chrome ignores auto, so we have to use this hack to set the correct height */
-webkit-logical-width: auto; /* Chrome ignores auto, but here for completeness */
}
/* Mozilla uses a pseudo-element to show focus on buttons, */
/* but anchors are highlighted via the focus pseudo-class. */
#supports (-moz-appearance:none) { /* Mozilla-only */
button::-moz-focus-inner { /* reset any predefined properties */
border: none;
padding: 0;
}
button:focus { /* add outline to focus pseudo-class */
outline-style: dotted;
outline-width: 1px;
}
}
The example above only modifies button elements to improve readability, but it can easily be extended to modify input[type="button"], input[type="submit"] and input[type="reset"] elements as well. You could also use a class, if you want to make only certain buttons look like anchors.
See this JSFiddle for a live-demo.
Please also note that this applies the default anchor-styling to buttons (e.g. blue text-color). So if you want to change the text-color or anything else of anchors & buttons, you should do this after the CSS above.
The original code (see snippet) in this answer was completely different and incomplete.
/* Obsolete code! Please use the code of the updated answer. */
input[type="button"], input[type="button"]:focus, input[type="button"]:active,
button, button:focus, button:active {
/* Remove all decorations to look like normal text */
background: none;
border: none;
display: inline;
font: inherit;
margin: 0;
padding: 0;
outline: none;
outline-offset: 0;
/* Additional styles to look like a link */
color: blue;
cursor: pointer;
text-decoration: underline;
}
/* Remove extra space inside buttons in Firefox */
input[type="button"]::-moz-focus-inner,
button::-moz-focus-inner {
border: none;
padding: 0;
}
try using the css pseudoclass :focus
input[type="button"], input[type="button"]:focus {
/* your style goes here */
}
edit as for links and onclick events use (you shouldn’t use inline javascript eventhandlers, but for the sake of simplicity i will use them here):
watch and learn
with this.href you can even access the target of the link in your function. return false will just prevent browsers from following the link when clicked.
if javascript is disabled the link will work as a normal link and just load some/page.php—if you want your link to be dead when js is disabled use href="#"
You can't style buttons as links reliably throughout browsers. I've tried it, but there's always some weird padding, margin or font issues in some browser. Either live with letting the button look like a button, or use onClick and preventDefault on a link.
You can achieve this using simple css as shown in below example
button {
overflow: visible;
width: auto;
}
button.link {
font-family: "Verdana" sans-serif;
font-size: 1em;
text-align: left;
color: blue;
background: none;
margin: 0;
padding: 0;
border: none;
cursor: pointer;
-moz-user-select: text;
/* override all your button styles here if there are any others */
}
button.link span {
text-decoration: underline;
}
button.link:hover span,
button.link:focus span {
color: black;
}
<button type="submit" class="link"><span>Button as Link</span></button>
I think this is very easy to do with very few lines. here is my solution
.buttonToLink{
background: none;
border: none;
color: red
}
.buttonToLink:hover{
background: none;
text-decoration: underline;
}
<button class="buttonToLink">A simple link button</button>
button {
text-decoration: underline;
cursor: pointer;
}
<button onClick="javascript:window.location.href='link'">Domain</button>