input[type=submit] {
float: left;
font-size: 14px;
width: 30%;
height: auto;
text-align: center;
font-weight: normal;
line-height: 30px;
word-wrap: break-word;
margin-left: 34.998721%;
margin-top: 20px;
clear: both;
min-height: 0px;
font-family: helvetica;
color: rgb(255, 255, 255);
background-color: rgb(0, 154, 222);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
So when I apply this styles to the <p> tag it looks:
but when I apply it for submit button it looks with some borders around it:
How to remove this border?
try adding this property to the css rule:
border: none;
if it didn't work then also add:
outline: none;
Try to add the following for the active state:
outline: none;
Since button elements do have a border on it's own, you have to disable it in order to get get it not shown.
To achieve this, you can rely on the border-style option found here.
So if you want to disable the standard-border of your submit button, you can simply add this line to your CSS.
border-style: none;
border-style property is set to be none by default, it seems that by defining border-top-left-radius property and so on the border-style is alternated to be solid thus you have the unwanted border. You can simply add border-color property and set it as transparent, then you should have got your desired result
Related
Only half of these are actually being applied!
.btn{
background-color: darkorange;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 10x 25px;
border-radius: 30px;
Any Ideas
Check if it’s being overruled by CSS specificity.
You can try to override the specificity using
!important
I created an anchor tag with .btn class. and use your css I made only one important changes. after this changes all css property is working.
Displays an element as an inline element (like <a>). Any height and width properties will have no effect.
so I did set display:inline-block; because The element itself is formatted as an inline element, but you can apply height and width values
.btn{
background-color: darkorange;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 10px 100px;
border-radius: 30px;
display: inline-block;
}
if it is helpful for you let me know.
I am experiencing weird behavior of input when it is focused. As you can see through the images below, an extra white border appears whatever its outline-color is.
I tried setting padding: 0px; and box-shadow: none; too, but still I could not remove it. One thing I realized is that setting outline-style: solid; does the trick, but then I couldn't see rounded corner anymore.
The image below is the same input element which has completely same css rulesets:
input {
flex: auto;
border: 1px solid darkgrey;
border-radius: 4px;
background-color: transparent;
color: white;
font-size: 42px;
}
input:focus {
outline-style: auto;
outline-color: orange;
}
body {
background-color: #383838;
}
<input>
Don't use the auto value. Use solid instead
input {
flex: auto;
border: 1px solid darkgrey;
border-radius: 4px;
background-color: transparent;
color: white;
font-size: 42px;
}
input:focus {
outline-style: solid;
outline-color: orange;
}
body {
background-color: #383838;
}
<input>
In addition, in CSS3, outline-style accepts the value auto. The auto value permits the user agent to render a custom outline style, typically a style which is either a user interface default for the platform, or perhaps a style that is richer than can be described in detail in CSS, e.g. a rounded edge outline with semi-translucent outer pixels that appears to glow. ref
I ran into an issue when making identically sized <textarea> and <p> side by side.
All is well when textarea is in focus, but as soon as unfocus, the textarea gets about 3px larger for no reason.
Anyone know how to prevent this from happening?
code:
<textarea id="keyInput" rows="1" inputType="text" onInput="keyFun()" autofocus></textarea>
and
#keyInput {
text-transform: uppercase;
float: left;
margin-right: 10px;
word-wrap: break-word;
box-sizing: border-box;
line-height: 1.5;
outline: none;
resize: none;
width: 350px;
font-size: 16px;
text-align: center;
outline: 7px solid white;
}
Any and all help to make the textarea size stable on focus and unfocus is greatly appreciated.
CodePen
if you remove
outline: 7px solid white;
It won't grow-and-shrink.
You can also set the background color to the same as html and so the effect is not obvious like so: outline: 7px solid #DFCFBE
I have done a lot of researching on this topic and couldn't find the right answer.
I have an input button that I want to have a grey border with a white background. But when I set the background to white, it automatically creates a shadow like border on the bottom and right of the button. I can't seem a way to remove it. Below is the css code and the HTML
Any help would be really appreciated. Thanks!
CSS:
input{
display: inline-block;
height: 40px;
width: 380px;
cursor: pointer;
font-weight: bold;
font-size: 14px;
background-color: white;
}
HTML:
<input id="sign_in" type="submit" value="Sign In">
You said you want a grey border around your button but you haven't applied it in your css.
Update your css:
input{
display: inline-block;
height: 40px;
width: 380px;
cursor: pointer;
font-weight: bold;
font-size: 14px;
background-color: white;
border: 2px solid grey; /*Add your border property*/
}
Browsers add retro borders once you change the background color of a button. Fixing it is as simple as adding the following rules:
outline: 0;
border: 1px solid grey;
I want to remove the space between tab and horizontal line displayed. Please find the fiddle http://jsfiddle.net/yy1t6w1f/ .
Sample code to create horizontal line:
div.hr {
background: #fff no-repeat scroll center;
margin-left: 15em;
margin-right: 15em;
width:50em;
height:.05em;
}
div.hr hr {
display: none;
}
The created tab's should touch the horizontal line and their should be no space between tab and div.Thanks.
Adding
hr { margin: 0; }
will do the trick. The hr tag in HTML has default margins, which are causing that space between those two elements. Note that the above code will remove all margins. If you only want the top margin removed, you can use margin-top instead of margin.
In fact, in your case, you need not use hr tag at all; you can remove it and simply add:
border-bottom: 1px solid #888888;
to your .tabDiv CSS selector; that should also serve your purpose here.
table, table td {
border-spacing: 0px;
padding: 0px;
}
hr { margin: 0; }
http://jsfiddle.net/yy1t6w1f/6/
Unless I’m misunderstanding what you are building, there is a far better way to write this.
See below:
nav a {
display: inline-block;
background-color: #efefef;
border: 1px solid #888;
border-top: 2px solid #888;
border-top-left-radius: 10px 5px;
min-width: 96px;
padding: 0 4px;
text-align: center;
font: 18px impact;
letter-spacing: 2px;
color: #3B0B17;
text-transform: uppercase;
text-decoration: none;
}
<nav>
FirstTab
SecondTab
ThirdTab
</nav>