I am attempting to get a solid black border around my form text input, but the border will not style correctly. Here is my code:
#forminput {
border: solid black !important;
border-top: solid black !important;
border-bottom: solid black !important;
border-width: 0 2px !important;
border-radius: 2px;
}
button {
width: 100px !important;
height: 30px !important;
background-color: #095ba0 !important;
border: 1px !important;
border-color: #095ba0 !important;
color: #fff !important;
font-family: 'Roboto', sans-serif !important;
font-weight: 400 !important;
cursor: pointer !important;
border-radius: 2px !important;
}
<form action="*" method="POST">
<input id="forminput" type="text" name="uid" placeholder="Username" ><br><br>
<input id="forminput" type="password" name="pwd" placeholder="Password" ><br><br>
<button type="submit">Sign In</button>
</form>
But my form input look like below. What am I doing wrong?
.
You set the top and bottom border widths to 0.
Don't do that.
#forminput {
border: solid black!important;
border-top: solid black!important;
border-bottom: solid black!important;
border-width: 2px!important;
border-radius: 2px;
}
<input id="forminput">
and you can remove all the redundant stuff while you're at it
#forminput {
border: solid black 2px;
border-radius: 2px;
}
<input id="forminput">
Try:
#forminput {
border: 2px solid #000;
}
This will place a 2px solid black border on the top, right, bottom and left of your input.
Related
Edge creates the perfect inset border, but the outset border is wrong.
Pictures here:https://imgur.com/a/pKavy1K
The only change in code between these two pictures is changing the border-style from outset to inset. Why are the colors not exactly the same but swapped?
.SmallButton {
color: grey;
font-family: "Segoe UI";
font-weight: bold;
background-color: white;
font-size: 15px;
border-radius: 30px;
border-style: inset;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
margin-top: 20px !important;
width: 230px !important;
height: 36px !important;
}
<input class="SmallButton" type="submit" value="Sign Up">
Browsers sometimes have slightly different approaches on how to display certain UI elements. It's best to style them manually by applying specific CSS properties.
You can change the border-style to solid and apply border-color for each side to get the preferred result.
.button {
background-color: #FFFFFF;
border-radius: 18px;
border-style: solid;
border-width: 2px;
color: #808080;
cursor: pointer;
font-size: 15px;
font-weight: bold;
height: 36px;
max-width: 230px;
width: 100%;
}
.button-outset {
border-color: #F0F0F0 #A0A0A0 #A0A0A0 #F0F0F0;
}
.button-inset {
border-color: #A0A0A0 #F0F0F0 #F0F0F0 #A0A0A0;
}
<input type="submit" class="button button-outset" value="Outset button">
<br><br>
<input type="submit" class="button button-inset" value="Inset button">
I have some CSS that attempts to do a pressed in button effect on either "active" or "hover" events but for some bizarre reason, the CSS from the event also appears to affect other buttons which are not being hovered or active.
See below example - when you hover over any of the three buttons, the others margins get changed and move up/down when they shouldn't be affected at all.
What's going on?
input[type="button"], input[type="reset"], input[type="submit"] {
color: #000000;
cursor: pointer;
overflow: visible;
background-color: #F0F0F0;
border-bottom: none;
border-top: 1px solid #CCCCCC;
/*box-shadow: 0 -4px 0 #CCCCCC inset;*/
box-shadow: 0 -4px 0 0 rgba(204, 204, 204, 1) inset;
border-collapse: separate;
margin-bottom: 0;
padding: 3px 13px 6px 13px;
position: relative;
text-transform: uppercase;
background-clip: padding-box;
border-bottom-right-radius: 4px;
border-right: 1px solid #CCCCCC;
border-top-right-radius: 4px;
border-bottom-left-radius: 4px;
border-left: 1px solid #CCCCCC;
border-top-left-radius: 4px;
background-image: none;
}
input[type="submit"]:hover,
input[type="button"]:hover {
box-shadow: 0 -2px 0 #CCCCCC inset;
margin-top: 4px;
padding-bottom: 4px;
background-image: none;
}
<center>
<input value="Yes, submit now!" name="button" type="submit">
<!-- WARNING: value of button is checked on next page -->
<input value="No, enter more details" name="button" type="submit">
<input value="Exit" name="button" type="submit">
</center>
well they move because one of them get's margin-top:4px , so they all move after that element
i suggest you use transform:translateY(4px) instead of margin-top:4px on :hover
see snippet below
input[type="button"], input[type="reset"], input[type="submit"] {
color: #000000;
cursor: pointer;
overflow: visible;
background-color: #F0F0F0;
border-bottom: none;
border-top: 1px solid #CCCCCC;
/*box-shadow: 0 -4px 0 #CCCCCC inset;*/
box-shadow: 0 -4px 0 0 rgba(204, 204, 204, 1) inset;
border-collapse: separate;
margin-bottom: 0;
padding: 3px 13px 6px 13px;
position: relative;
text-transform: uppercase;
background-clip: padding-box;
border-bottom-right-radius: 4px;
border-right: 1px solid #CCCCCC;
border-top-right-radius: 4px;
border-bottom-left-radius: 4px;
border-left: 1px solid #CCCCCC;
border-top-left-radius: 4px;
background-image: none;
}
input[type="submit"]:hover,
input[type="button"]:hover {
box-shadow: 0 -2px 0 #CCCCCC inset;
transform:translateY(4px);
padding-bottom: 4px;
background-image: none;
}
<center>
<input value="Yes, submit now!" name="button" type="submit">
<!-- WARNING: value of button is checked on next page -->
<input value="No, enter more details" name="button" type="submit">
<input value="Exit" name="button" type="submit">
</center>
How do I style a button, with a shadow, so that it looks like it is pressed in?
I tried using box-shadow: ... ;. But this didn't have any affect.
By creatively styling the :active or :focus pseudo classes using a box-shadow: inset ...;
Using the :active pseudo class:
button {
background: #ededed;
border: 1px solid #ccc;
padding: 10px 30px;
border-radius: 3px;
cursor: pointer;
}
button:active {
background: #e5e5e5;
-webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
-moz-box-shadow: inset 0px 0px 5px #c1c1c1;
box-shadow: inset 0px 0px 5px #c1c1c1;
outline: none;
}
<button>
Click me
</button>
Using the :focus pseudo class:
button {
background: #ededed;
border: 1px solid #ccc;
padding: 10px 30px;
border-radius: 3px;
cursor: pointer;
}
button:focus {
background: #e5e5e5;
outline: none;
-webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
-moz-box-shadow: inset 0px 0px 5px #c1c1c1;
box-shadow: inset 0px 0px 5px #c1c1c1;
}
<button>
Click me
</button>
As an alternative to buttons, there is also a possibility to simply use checkbox with the pseudo-class :checked to toggle between states.
label.label-checkbox {
cursor: pointer;
}
label.label-checkbox input {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
pointer-events: none;
}
label.label-checkbox span {
padding: 11px 21px;
border: 1px solid #ccc;
display: inline-block;
color: #202020;
border-radius: 6px;
margin: 7px;
background: #f5f5f5;
user-select: none;
}
label.label-checkbox input:checked + span {
box-shadow: inset 1px 2px 5px #777;
transform: translateY(1px);
background: #e5e5e5;
}
<h1>Pressed buttons with Checkbox</h1>
<label class="label-checkbox">
<input type="checkbox">
<span>Checkbox</span>
</label>
<label class="label-checkbox">
<input type="checkbox" checked>
<span>Styled</span>
</label>
<label class="label-checkbox">
<input type="checkbox">
<span>As</span>
</label>
<label class="label-checkbox">
<input type="checkbox" checked>
<span>Pressed</span>
</label>
<label class="label-checkbox">
<input type="checkbox">
<span>Buttons</span>
</label>
The best way is to nudge the button lower on the page. Using transformY would be the most straight-forward. However that can mess up the layout of other things in the page. So I think that it is better to use margin to temporarily lower the button, such as,
button {
background-color: white;
padding: 10px;
vertical-align: top;
box-shadow: 2px 1px 2px gray;
margin: 4px 10px 4px 10px;
}
button:active {
box-shadow: 0 0 0 white;
margin: 6px 10px 2px 10px;
}
<button>click me</button>
<button>click me</button>
<br>
<button>click me</button>
<button>click me</button>
As in the example, you can take away 2px from the bottom margin, and add 2px to the top margin, therefore you preserve the total size of the button.
You need vertical-align in case there are more than one button.
I think that the best way to make a button looks like it's pressed it's to make it a little darker.
button{
background-color: #03A9F4;
border: none;
padding: 15px 25px;
text-transform: uppercase;
color: white;
font-weight: 700;
border-radius: 3px;
}
button:hover, button:focus{
background-color: #0074a9;
outline: none;
}
<button>Button</button>
If you think visually about what happens when a push-button (like on an old-style stereo system) is pushed in, the button moves back. Visually, the face of the button is darker. The text on the button is inset. The border of the button is dark.
The other answers here all give part of the answer.
This visually does all of the above:
.btnPushed {
color: #efefef; //orig text color was #FFF
text-shadow: -1px -1px 0px #777, -1px -1px 0px #777;
box-shadow: inset 1px 1px 4px #222;
transform: translateY(1px); /* Add per Vince's helpful comment */
}
As you might notice, we apply the styling by adding a class.
$('button').click(function(){
$('button').removeClass('depressed');
$(this).addClass('depressed');
});
button {
border: 1px solid black;
border-radius: 3px;
color: #f5f5f5;
background-color: #b8860b;
background-image: linear-gradient(-180deg,#6699FF,#3473F5 90%);
cursor: pointer;
font-size: 14px;
line-height: 20px;
outline: none; /* Removes Chrome's blue outline */
margin: 2px;
}
button:active{
}
.depressed{
color: #efefef;
text-shadow: -1px -1px 0px #777, -1px -1px 0px #777;
box-shadow: inset 1px 1px 3px #222;
margin: 3px -1px -1px 3px; /* T R B L */
transform: translateY(1px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<button>Button1</button>
<button>Button2</button>
<button class="depressed">Button3</button>
<button>Button4</button>
To avoid the adjustment (movement) of the other buttons due to the margin change, just put each button into a fix-size div. That way the buttons move around within their divs, without affecting the other buttons inside their own divs.
$('button').click(function(){
$('button').removeClass('depressed');
$(this).addClass('depressed');
});
div {
display: inline-block;
width: 65px;
height: 25px;
}
button {
border: 1px solid black;
border-radius: 3px;
color: #f5f5f5;
background-image: linear-gradient(-180deg,#6699FF,#3473F5 90%);
cursor: pointer;
font-size: 14px;
line-height: 20px;
outline: none; /* Removes Chrome's blue outline */
margin: 2px;
}
button:active{
}
.depressed{
color: #efefef;
text-shadow: -1px -1px 0px #777, -1px -1px 0px #777;
box-shadow: inset 1px 1px 3px #222;
margin: 3px -1px -1px 3px; /* T R B L */
transform: translateY(1px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div><button>Button1</button></div>
<div><button>Button2</button></div>
<div><button class="depressed">Button3</button></div>
<div><button>Button4</button></div>
Update:
Added transform: translateY(1px), per Vince's helpful comment below.
.button{
color: white;
background-color: blue;
padding: 8px 25px;
border-radius : 7px;
}
.button:active {
box-shadow: 0 0 0 black;
margin: 3px 0 0 0 ;
}
<input type="button" class="button" value="Enter">
button{
background-color:grey;
padding:10px;
border:none;
color:white;
}
button:hover{
background-color:black;
color:white;
}
<button class"b1">button</button>
I have simple form, it is styled in css. JSfiddle link : here
<form action="" method="post" class="basic-grey">
<h1>Report a problem
</h1>
<label>
<span>Your Name :</span>
<input id="name" type="text" name="name" placeholder="Your Name" />
</label>
<label>
<span>Your Email :</span>
<input id="email" type="email" name="email" placeholder="Valid Email Address" />
</label>
<label>
<span>Message :</span>
<textarea id="message" name="message" placeholder="Specify The Problem"></textarea>
</label>
<label>
<span>Subject :</span><select name="selection">
<option value="Job Inquiry">Job Inquiry</option>
<option value="General Question">General Question</option>
</select>
</label>
<label>
<span> </span>
<input type="submit" name="submit" value="Submit" class="button">
</label>
</form>
Here is css style. Problem is that button have big hover area (on left side). I upload example on webhosting. here you can see what i think I tried position:absolute for button but i can not change position. Position:relative does not work too.
.basic-grey {
margin-left:auto;
margin-right:auto;
max-width: 500px;
padding: 25px 15px 25px 10px;
font: 12px Georgia, "Times New Roman", Times, serif;
color: #000;
text-shadow: 1px 1px 1px #FFF;
}
.basic-grey h1 {
font-size: 25px;
padding: 0px 0px 10px 40px;
display: block;
border-bottom:1px solid #C9C9C9;
margin: -10px -15px 30px -10px;;
color: #000;
}
.basic-grey h1>span {
display: block;
font-size: 11px;
}
.basic-grey label {
margin: 0px;
}
.basic-grey label>span {
float: left;
width: 20%;
text-align: right;
padding-right: 10px;
margin-top: 10px;
color: #000;
}
.basic-grey input[type="text"], .basic-grey input[type="email"], .basic-grey textarea, .basic-grey select {
border: 1px solid #DADADA;
color: #000;
height: 30px;
margin-bottom: 16px;
margin-right: 6px;
margin-top: 2px;
outline: 0 none;
padding: 3px 3px 3px 5px;
width: 70%;
font-size: 12px;
line-height:15px;
box-shadow: inset 0px 1px 4px #ECECEC;
-moz-box-shadow: inset 0px 1px 4px #ECECEC;
-webkit-box-shadow: inset 0px 1px 4px #ECECEC;
}
.basic-grey textarea{
padding: 5px 3px 3px 5px;
}
.basic-grey select {
appearance:none;
-webkit-appearance:none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
width: 70%;
height: 35px;
line-height: 25px;
}
.basic-grey textarea{
height:100px;
}
.basic-grey.button {
opacity:0.7;
background: #55596C;
padding: 10px 15px 10px 15px;
color: #FFF;
box-shadow: 1px 1px 5px #B6B6B6;
border-radius: 3px;
text-shadow: 1px 1px 1px #000;
cursor: pointer;
}
.basic-grey.button:hover {
opacity:0.7;
background: #373E4D;
}
It's caused by the <label></label> that your button is enclosed in. Just enclose it in a div instead:
<div>
<span> </span>
<input type="submit" name="submit" value="Submit" class="button">
</div>
If you want this div to look the same as the label, you can give it a css class, e.g. class="label" and assign the same CSS properties to "div.label" and "label".
Remove span before input and set margin-left for input. jsfiddle
<label>
<input style="margin-left: 110px" type="submit" name="submit" value="Submit" class="button">
</label>
I'm trying to create a input box that has only one border (i.e. border-left), but every time I put border-left to the selector, the top, right, bottom border show up (with that beveled and embossed look). Here's what I have right now.
HTML
<input type="text" id="fullname" class="detail" name="fullname" value="" />
CSS
.detail {
border-left: 1px #fff solid;
background: transparent;
width: 490px;
height: 30px;
padding-left: 10px;
}
Here's my JSFiddle: http://jsfiddle.net/XRFB3/
Set your default border first:
.detail {
border:0;
border-left: 1px #fff solid;
background: transparent;
width: 490px;
height: 30px;
padding-left: 10px;
}
JSFiddle
Try to reset borders first like border: none;. That is because browsers apply default user agent styles if the custom is not defined.
.detail {
border: none;
border-left: 1px #fff solid;
background: transparent;
width: 490px;
height: 30px;
padding-left: 10px;
}
Use the following
border: none;
border-left: 1px Solid #fff;
instead of
border-left: 1px #fff solid;