I would like to have some guidance on how to make good forms with submit buttons that look flat but not like the default ones that are done when using html. I want the submit buttons like those found on this website.
You should try applying CSS to your submit buttons like follow:
<head>
.......
your html code
.....
<style>
.pass {
width: 105px;
padding: 5px;
margin: 2px;
font-weight: bold;
color: #065fba;
background: #f4f5f8;
font-size: 11px;
border: #e2e2e2 1px solid;
}
</style>
</head>
.......
your html code
.....
<input trpe="submit" class="pass" value="Submit" />
......
...
.
Hope this helps.
The css use for the 'Post Your Answer' button on this website is (more or less):
input[type="submit"] {
border: 1px solid #888888;
font-family: Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 130%;
font-weight: bold;
margin: 3px;
padding: 2px;
For cross-browser compatibility you'll need to add a class to your <input type="submit" /> as the CSS [type=""] attribute isn't recognised in older versions of Internet Explorer.
If you want to see how any element has been styled on any examples you like the look of, use Firebug or its equivalents for other browsers, which will show you the CSS applicable to a selected element.
In Stack Overflow's case, it's this, with the buttons being wrapped with a <div class="form-submit">:
.form-submit input {
border: 1px solid #888888;
font-family: Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 130%;
font-weight: bold;
margin: 3px;
padding: 2px;
}
Related
I have an app, that requires an SMS code for login. I've added a technically identical example below.
For accessibility reasons, I want this SMS code thing to be a single <input> in the HTML. I also would be happy to delete the code that handles the transitions between the digits, and copy~paste.
Is it possible to implement using a single input? If so how?
Drawing DIVs right over the input, is a solution I'd like to avoid, for responsiveness sake.
The app is actually using react and MUI, but I could adapt any HTML-CSS solution.
.container {
margin: 50px;
background: #fff url(https://i.ibb.co/x7SpXXZ/squares4.png) 12px 2px no-repeat;
width: 160px;
overflow: hidden;
}
.container input {
letter-spacing: 20px;
font-family: "Courier New", Courier, monospace;
font-size: 150%;
font-weight: bold;
height: 30px;
padding-left: 20px;
padding-right: 20px;
width: 160px;
border: 0;
background-color: transparent;
outline: 0;
}
<div class="container">
<input type="text" value="1234" maxlength="4">
</div>
I created a custom checkbox with basically an icon inside a checkbox. The icon is a font from flaticon so that I can easily change size and color. Unfortunately the checkbox is shown in Chrome and Safari but not in Firefox and IE.
Here is a sample of my code:
CSS: Custom Checkbox
#checkicons input[type=checkbox]{
visibility: hidden*/
height: 80px;
line-height: 1.4;
}
#checkicons input[type=checkbox]:checked:after, input[type=checkbox]:after{
visibility: visible;
font-size:50px;
margin-left: -36px;
padding: 15px;
border-radius: 8px;
line-height: 1.4;
}
#checkicons input[type=checkbox]:checked:after{
color: white;
border: solid black;
background-color: #1e6e11;
border-width: 1px;
}
#checkicons input[type=checkbox]:after{
color: #1e6e11;
border: solid #1e6e11;
background-color: white;
border-width: 1px;
}
#checkicons label{
max-width: 90px;
}
Html: Checkbox
<div id="checkicons">
<input type="checkbox" class="flaticon-leisure4" id="housecare" name="housecare" onchange="toggleDiv(this)"></input><br>
<label for="housecare">House care</label>
</div>
CSS: Flaticon
#font-face {
...url to fonts...
font-weight: normal;
font-style: normal;
}
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {
font-family: Flaticon;
.flaticon-leisure4:after {
content: "\e00f";
}
I did some tests on the code while trying to fix this issue. The behavior on Firefox and Safari is the same like I would delete the class in the html of the checkbox.
Here I do have two screenshots of the result. The first is working with chrome, the second is the not working version with firefox and IE which equals with the result if I would delete the code 'class="flaticon-leisure4"' from the html.
Result on Chrome, Safari
Result on Firefox, IE
I would be happy If I can solve this problem or if you can give me alternative suggestions.
Pseudo elements are only working for container elements. Therefore I changed the customized checkbox to a label. Instead of the customized checkbox I just following code
CSS: Custom Icon
#checkicons .icon{
max-width: 90px;
font-family: Flaticon;
font-size:50px;
margin-left: -36px;
padding: 5px 15px 5px 15px;
border-radius: 8px;
line-height: 1.4;
color: #1e6e11;
border: solid black;
background-color: white;
border-width: 1px;
}
New HTML
<input type="checkbox" id="housecare" name="housecare" onchange="toggleDiv(this); toggleIcon('houseCareIcon')">
<label for="housecare" id="houseCareIcon" name="houseCareIcon" class="flaticon-leisure4 icon"></label>
<label for="housecare">House Care</label>
</input>
The color handling whether the label should look like checked or not checked is now done with JavaScript.
Javascript: Check Color Handling
function toggleIcon(obj, checkobj){
if(document.getElementById(checkobj.id).checked){
document.getElementById(obj).style.color='white';
document.getElementById(obj).style.backgroundColor='#1e6e11';
}else{
document.getElementById(obj).style.color='#1e6e11';
document.getElementById(obj).style.backgroundColor='white';
}
}
Thanks Hidden Hobbes for the "inspiration"!
This question already has answers here:
How to style button inputs to be identical in Chrome and Firefox?
(4 answers)
Closed 8 years ago.
I have a CSS class for styling buttons. When I apply it to an <input> and an <a> tag, the <a> is a bit smaller than the <input>. This problem occurs in Firefox (33), but in Chrome (38) it looks fine.
Here is a minimal example:
.my-button {
display: inline-block;
padding: 1em;
border-radius: 0.2em;
border: 1px solid #000;
line-height: 1em;
font-size: 13px;
text-decoration: none;
background-color: #ccc;
color: #000;
}
<input class="my-button" type="submit" value="Save">
<a class="my-button" href="#">Cancel</a>
You can see it also here: http://jsfiddle.net/tr4vbrha/4/
This happens because of a difference in font. The input on windows is Microsoft Sans Serif, while in the a tag it is Times New Roman.
To fix this add the font-family property to the my-button class.
This probably is because the box-sizing property of button is different to that of a button. I added this:
input{
box-sizing: content-box;
}
.my-button{
min-width: 2.75em;
}
and it worked
remove css attribure : display:inline-block
see example :demo
.my-button {
padding: 1em;
border-radius: 0.2em;
border: 1px solid #000;
line-height: 1em;
font-size: 13px;
font-family: Arial;
text-decoration: none;
background-color: #ccc;
color: #000;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
.my-button {
display:inline-block
}
}
<input class="my-button" type="submit" value="Save">
Cancel
I don't like the default button style. It's really boring. I am using
<input type="submit">
type buttons. Can I style these somehow in css? If not, the other way of doing it i guess would be to use a div instead, and make it a link. How do you make those work with forms?
You can achieve your desired through easily by CSS :-
HTML
<input type="submit" name="submit" value="Submit Application" id="submit" />
CSS
#submit {
background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:6px;
color: #fff;
font-family: 'Oswald';
font-size: 20px;
text-decoration: none;
cursor: pointer;
border:none;
}
#submit:hover {
border: none;
background:red;
box-shadow: 0px 0px 1px #777;
}
DEMO
Yeah, it's pretty simple:
input[type="submit"]{
background: #fff;
border: 1px solid #000;
text-shadow: 1px 1px 1px #000;
}
I recommend giving it an ID or a class so that you can target it more easily.
Yes you can target those specificaly using input[type=submit] e.g.
.myFormClass input[type=submit] {
margin: 10px;
color: white;
background-color: blue;
}
You can directly create your own style in this way:
input[type=button]
{
//Change the style as you like
}
You might want to add:
-webkit-appearance: none;
if you need it looking consistent on Mobile Safari...
write the below style into same html file head section or write into a .css file
<style type="text/css">
.submit input
{
color: #000;
background: #ffa20f;
border: 2px outset #d7b9c9
}
</style>
<input type="submit" class="submit"/>
.submit - in css . means class , so i created submit class with set of attributesand applied that class to the submit tag, using class attribute
having my first attempt at rounded corners in a login form. Just doing the layout right now, but having some IE7 troubles. Trying to avoid using conditional statements, but although I can get it displaying perfectly in Firefox 3.5, IE looks to be creating a larger margin on the right and left of my login button. It could be that I'm not structuring this the best way possible, so looking for a little insight from the community. Most of my problems began after trying to round to corners using the method shown. My goal is IE6/7 compatibility.
<div id="credentials">
<div id="credsheader"><div id="tr"> </div></div>
<input type="text" class="blurred" id="username" value="USERNAME" />
<input type="password" id="password" class="blurred" value="PASSWORD" />
<button type="submit" id="login"><img src="./images/login.png" alt="Submit" /></button>
<div id="credsfooter"><div id="bl"> </div></div>
</div>
div#credentials{
position: absolute;
right: 10px;
top: 10px;
background-color: #666;
padding: 0px 5px;
}
div#tr{
float: right;
background: url('../images/tr.png');
background-repeat: no-repeat;
cursor: default;
}
div#bl{
float: left;
background: url('../images/bl.png');
background-repeat: no-repeat;
cursor: default;
}
#credsfooter{
position: absolute;
bottom: 0px;
left: 0px;
height: 6px;
}
#credsheader{
position: absolute;
top: 0px;
right: 0px;
height: 6px;
}
#username{
font-family: 'Lucida Sans', Helvetica, Arial, sans-serif;
font-size: 8pt;
padding: 3px;
margin: 8px 3px;
vertical-align: middle;
}
#password{
font-size: 8pt;
padding: 3px 3px 4px 3px;
margin: 8px 17px 8px 3px;
vertical-align: middle;
}
input.blurred{
color: #AAA;
}
input.focused{
color: #000;
}
#login{
background: transparent;
border: 0px;
padding: 4px 0px 2px 0px;
margin: 0px -12px;
cursor: pointer;
vertical-align: middle;
}
On a <button> element in IE7 you need to set overflow visible:
button {
*overflow: visible;
}
Found here: http://refresh-sf.com/blog/2009/06/button-padding-ie7-bu/
I personally like to use the "* hack" to target IE7 only - although probably unnecessary in this case.
Ok so I found a lot of problems cause by browser inconsistencies which were causing you a whole lot of problems so I basically started over. I hate forms because of inconsistencies so this was a learning experience for me. I was able to really consolidate the CSS because a lot of it was used to compensate for weird padding and margins. The main thing was I used an input element for a button instead of a button because it is more consistent across browsers. I also added a form tag to fix any issues there. Note that the <p> in the form is intentional. I also added an reset.css file that makes a huge difference because It resets all elements to a state that is consistent to all browsers.
Below is the re written-code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Buttons Suck in IE7!</title>
<link rel="stylesheet" href="reset.css" type="text/css" />
<style type="text/css">
#credentials{
position: absolute;
right: 10px;
top: 10px;
background-color: #666666;
padding: 10px;
-moz-border-radius: 5px;
}
input.text-input{
font-family: 'Lucida Sans', Helvetica, Arial, sans-serif;
border: 1px solid black;
vertical-align: middle;
height: 20px;
width: 140px;
color: #AAAAAA;
}
input.text-input:focus{
color: #000000;
}
input#login{
background: transparent;
border: 0px;
height: 20px;
cursor: pointer;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="credentials">
<form action="http://www.site.com/login.php">
<p>
<input type="text" class="blurred text-input" id="username" value="USERNAME" />
<input type="password" class="blurred text-input" id="password" value="PASSWORD" />
<input id="login" type="image"
src="http://www.axialis.com/objects/users-home.jpg"
name="submit" value="Button Text" />
</p>
</form>
</div>
</body>
</html>
Note that the image I used for the button is some random image I found on Google! You probably also notice that I used -moz-border-radius: 5px; for the rounded corners. This was for simplification. What you can do is take a screen shot of the credentials box in Firefox and then crop just the box out in your favorite image editor. Next you would fill in the inputs with the gray color using some sort of paint brush tool. Now you would have a blank gray box of the same shape and size. Now all you have to do is set that as the background image of your credentials box. That's a lot simpler then do each corner at a time! Don't forget to get rid of -moz-border-radius: 5px; after you do this.
Oh, and before I forget here is reset.css:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
Include this reset.css on every page its a lifesaver trust me. Oh and one last note. input.text-input:focus{} probably wont work in IE6 or 7, it will only work on tags. But don't worry because I think IE6 has a limited lifespan at this point.
I hope That helped...good luck!
UPDATE: I tested this on IE 5.5-8 and it looks the same on every one, the only problem is :focus only works in IE8 for input tags.
Not sure if this is the case, but it could be the 'IE Double Margin Bug'.
From memory, I think it might be worth trying to add display: inline; to your floated elements?
Good Luck!
That's difficult to answer that without viewing the HTML in action (with images, for example). Could you set a sample page up somewhere?
Theoretically, it could be a case of not having hasLayout for your button element. You can add the position: relative CSS style to the button element and see if it works. Alternatively, it could be a case of negative horizontal margins (IE does not like them sometimes).
Got acceptable margins, but still not perfect cross browser. Just spent time manipulating margin sizes in pixels until it didn't look terrible.