I would like to keep only bottom border of a textbox. Here is my css-
input[type="text"],input[type="password"] {
border:0px;
border-bottom:1px solid black;
}
input[type="text"]:focus, input[type="password"]:focus {
border-bottom:2px solid green;
}
Here is how it looks at-
On chrome-
On firefox-
On chrome, textbox gets a outline when it got focus. Is there any way to remove it?
input[type="text"]:focus, input[type="password"]:focus {
outline:none;
border-bottom:2px solid green;
}
you are missing outline:none.
Related
I want to create h2 with this style
CSS:
h2 {
color: #158FFA;
border-bottom: 1px solid #CCC;
}
Code:
<h2>WHAT WE DO</h2>
But this only create a bottom line with a solid color. I want it with dark border beneath text.
You can wrap your text with a span, and give that a darker border than the header. Then use positioning to bump the text down a pixel to line the borders up:
HTML
<h2><span>WHAT WE DO</span></h2>
CSS
h2 {
color: #158FFA;
border-bottom:1px solid #CCC;
text-align:center;
}
span{
position:relative;
top:1px;
display:inline-block;
border-bottom:1px solid #AAA;
}
JSFiddle
Or if you wanted to use a pseudo element:
h2:before{
position:relative;
top:1px;
display:inline-block;
border-bottom:1px solid #AAA;
content:'What We Do';
}
The only issue here being that you need to add your text in the 'content' CSS property.
JSFiddle
How do I prevent elements from shifting when I add a border to them?
example:
p:hover
{
border:1px solid red;
}
p
{
border:none;
}
But is not working
Always give them a border, just make it transparent when it's not hovered:
p {
border:1px solid transparent;
}
p:hover {
border:1px solid red;
}
JSFiddle
Of course it's one answer, your question can be answered a number of ways.
p {
border:1px solid transparent;
}
I am trying to understand why IE 7>10 is showing a black border on a submit button. In order to clear it, I have to click inside the fieldset and then it goes away. But comes back when I click send or cancel. Is this a common problem with IE? I have included screenshot. Thanks!
css code
.submit
{
margin:-50px 0 0 -148px;
background-color:#eee;
height:40px;
width:120px;
padding:0;
border:1px solid #666;
color:#42A0FF;
}
.cancel
{
margin: -51px 0 0 -20px;
background-color:#eee;
height:40px;
width:120px;
padding:0;
border:1px solid #666;
color:#42A0FF;
}
fieldset
{
background:#f2f2e6;
border-color:#cccccc #cccccc #cccccc #cccccc;
margin:10px 0 46px -150px;
width:404px;
display:block;
text-height:10px;
padding-bottom:15px;
}
Try resetting the main input
input {border:0; margin:0;padding:0;}
And add a span to give the span the border you want so it will work universally:
.input-shell {border: #ccc 1px solid}
<span class="input-shell"><input button /></span>....
Heres a JSFIDDLE:
http://jsfiddle.net/Riskbreaker/tqnhg/1/
Heres a ref of same thing:
Any way to remove IEs black border around submit button in active forms?
Finally do this:
input[type=submit],
input[type=reset],
input[type=button]
{
filter:chroma(color=#000000);
color:#cccccc;
}
How can I style a button on IOS to look like the default active state?
I will be using touchstart, but want the button to look like a regular button that is being pressed.
HTML:
<button class="active"> I am pressed </button>
CSS:
button.active{
???
}
Images: (sorry, they are not the exact same crop-size)
EDIT: my latest attempt is:
button.active
{
border-radius: 12px;
border: 1px solid black;
background-color: #888;
box-shadow: 0 0 2px 2px #888;
}
It’s pretty close but the border shrinks in.
You could do this, faking a second border using the :before pseudo-elements
.active{
background:#e2e2e2;
font-weight:bold;
width:92px;
padding:.5em;
border:3px solid #e2e2e2;
border-radius:15px;
position:relative;
z-index:10;
}
.active:before{
content:"";
display:block;
position:absolute;
z-index:-1;
top:1px;
left:1px;
right:1px;
bottom:1px;
border:1px solid #000;
border-radius:15px;
}
Example: http://jsfiddle.net/E3jXr/
I have a triangle next to menu items, using pure CSS. It works flawlessly in Internet Explorer and Firefox but Chrome crops the bottom of the arrow. Here's some screenshots of the issue:
Here is the CSS I'm using:
/*menu arrows */
.arrowsprite {
width:0px;
height:0px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #444444;
font-size:0px;
line-height:0px;
top:-2px;
position:relative;
}
.arrowspriteselected {
width:0px;
height:0px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #fff;
font-size:0px;
line-height:0px;
top:-2px;
position:relative;
}
.leftish li:hover .arrowsprite {
border-top:5px solid #444444;
}
.leftish li:hover .arrowspriteselected {
border-top:5px solid #444444;
}
The HTML is:
<li>Wanted <span class="arrowsprite"></span></li>
Does anyone see any glaring problems in my CSS?
Try setting display to inline-block for your .arrowsprite rule. See this fiddle for an example.
.arrowsprite {
width:0px;
height:0px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #444444;
font-size:0px;
line-height:0px;
top:-2px;
position:relative;
display:inline-block;
}
It's working for me in Chrome 14.0.803.0 dev.
I'm not able to reproduce what you see in Chrome 12.0.742.112. For me, the span didn't even show up with that CSS and HTML. However, I tried putting in a non-breaking space, and then I was able to see it and it displayed fine.
<li>Wanted <span class="arrowsprite"> </span></li>
Here's a fiddle to compare with and without the non-breaking space. Notice that on Firefox at least the method gives more space (no pun intended), so see if you can still make it do what you want. If you can't, the next thing to try would be a float for your list elements (See this question for why).