I have a button in my form, and would like to change its default border.
I can't remove the default and add mine, I have both or none
button.boton{
cursor: pointer;
position: relative;
background:red;
border:none; /*delete the default one*/
border: 1px solid blue; /*add my own border */
}
how can I do this?
Use class identifier to let the style be applied on your button:
CSS Code:
button.boton{
cursor: pointer;
position: relative;
border: 1px solid blue; /*add my own border */
}
HTML Code:
<button class="boton"> Button </button>
Also try this jsfiddle link
EDIT:
Here is a screenshot of the output file in internet explorer version 11
For IE9 :
If you specify 3 of the borders, those borders will render in IE9. Once you specify the 4th border, IE9 refuses to render any of the borders
button.boton{
cursor: pointer;
position: relative;
border-top: 1px solid blue;
border-right: 1px solid blue;
border-bottom: 1px solid blue;
}
Try adding this to the CSS:
-webkit-appearance:none;
And make sure nothing else is adding a border around your button.
You do not need to set the border twice. When you set the border it will remove all properties that were previously set.
Related
i want to add border to the bootstrap form box.i had added border style properties but its not working . suggest please
thia is the form box class:
<div class="form-box">
<div class="form-top">
<div class="form-top-left">
And this is the css :
.form-box {
margin-top: 0px;
border-radius: 25px;
border-bottom-style: solid;
border-color: #50e54b;
}
Because of other classes, use the "!important"
border: solid 2px #50e54b!important;
You can add border to your box by using the border CSS property [border](https://developer.mozilla.org/en-US/docs/Web/CSS/border)
Here's an example usage:
border: 1px solid #FFFFFF;
The code above will add a solid border of 1px in thickness and white in colour.
Click the link above to see more about the border property.
From what I can tell, the code works fine. But if you want you can add an 8px padding so the content has room for placement instead of being crammed in there with the border. By the way, a 2px or 4px border radius looks better for the border, but it's up to you.
.form-box {
padding: 8px; /*makes it look neat*/
border-radius: 4px; /*or 2px*/
border: 1px solid red;
}
The input-box comes with an outline that can be set to 0.
It will then show an ugly border around it.
This border can be set to none as well, leaving the input box without a border.
However I'd like to put a border only on the top and bottom of the input box, but can't get it done.
Any ideas?
Apply this to your input element
input {
border: 1px solid #000; /* this will give the input 1px black border all around */
border-left: 0 none;
border-right: 0 none;
}
Should do it.
Or alternatively, you can go
input {
border: 0; /* resets default border */
border-top: [your border styling];
border-bottom: [your border styling];
}
Just do this if you want to use the provided border..
input {
border-left:0px;
border-right:0px;
}
If you don't want that than use..
input {
border-top:1px solid red;
border-bottom:1px solid red;
border-left:0px;
border-right:0px;
}
In addition to the borders, there's also an outline added by the browser.
You can do
textarea:focus, input:focus{
outline: 0;
}
or even
*:focus {
outline: 0;
}
to disable this line.
Source : https://stackoverflow.com/a/3397158/3510872
On a page when we tab across elements, they get focused and those elements get highlighted with some browser specific css.
Like on button when focused it shows like below screen shot.
Notice the white dotted line on button
I would like to show exactly similar when button is hovered
button:hover {
/*What should go here?*/
}
Is this what you're looking for? http://jsfiddle.net/Screetop/tpx5tyxc/
As mentioned by the others, take a look at the outline property. Also the box-shadow simulates a border around your button.
<button>Submit</button>
button {
display: block;
background: grey;
padding: 5px;
border: none;
box-shadow: 0 0 0 3px grey;
}
button:hover {
/*What should go here?*/
outline: 1px dotted white;
}
button:focus {
outline: 1px dotted white;
}
There’s the CSS outline property, but it won’t render inside the element. If we use a simple border for the dotted line, we nee to get some spacing between the dots and the visible border. Perhaps using box-shadow? Try this:
button{
width:140px;
height:36px;
color:#FFF;
background-color:#555;
border:1px dotted #555;
border-radius:2px;
box-shadow: 0 0 0 4px #555;
}
button:hover{
border-color:#FFF;
}
I want to add a <div> container in place of a check box. But the <div> container takes up the entire line. I tried all sorts of "floats" but none worked.
here is my css code:
.checkbox{
border-bottom: 3px solid black;
border-top: 3px solid black;
border-right: 3px solid black;
border-left: 3px solid black;
width:15px;
height:15px;
}
With The inline div will not occupy the line
use this
.checkbox{
border-bottom: 3px solid black;
border-top: 3px solid black;
border-right: 3px solid black;
border-left: 3px solid black;
width:15px;
height:15px;
display:inline;
}
Style it with this: .inline {display: inline}
Use inline tag i.e.
inline { display : inline}
Inline is doing the trick, but you are really just avoiding the problem. You could have just set a width on the div and the label or whatever and floated them. By default block-level elements are 100% width. At some point, you are going to want to have some of the options that being display block allows - and inline doesn't. And you will probably also want to have some of the options that inline elements have, like vertical alignment. I suggest trying inline-block - I've been getting tons of use out of it. Give hit a spin: fiddle
HTML
<input type="checkbox" name="check-box-01" />
<div class="check-box-replacement"></div>
<label class="check-box-label" for="check-box-01">
Label for this checkbox
</label>
CSS
input[type="checkbox"] {
display: none;
}
.check-box-replacement {
width: 2em;
height: 10em; /* just to prove a point */
background-color: red;
}
.check-box-replacement, .check-box-label {
display: inline-block;
vertical-align: middle;
}
I create an empty span with css border: 1px solid #333 but didn't see any working separator. I think there must be something inside the span? how to create a border with empty tag? a hr tag is too ugly.
You must give it a size, and display it as a block. Try this.
span.separator {
border-top: 1px solid #333;
width: 100%;
height: 1px;
display: block;
}
JSFiddle
hr tag is not ugly if you use border: 0; and than use border-top: 1px solid #000;, the 3d style of hr is just applied by browser, you can alter it the way I suggested.
hr {
border: 0;
border-top: 1px solid #000;
margin: 10px auto; /* For vertical spacing */
}
Demo
I would suggest you to use <hr /> as semantic goes, it will give a meaning to your page and will also save you few characters in the source.
Secondly about the span tag, it's an inline tag, to span it 100% you need to make it display: block;.
span.separator {
border-top: 1px solid #000;
display: block;
margin: 10px auto; /* For vertical spacing */
}
For more information on inline span you can refer my answer here.
A span is not a block element, in order to get what you want, you would have to give it a height and set it as display:block or inline-block.
If you want the border to be only on one side you can use border-right or border-left;
test <span style="display:inline-block;height:13px;border:1px solid black;"></span> test
Here is an example
http://jsfiddle.net/Cm5fK/