I have to design a form with an input inside it. I use background image on the input so it would look like a button. Every time somebody clicks it, it would send $POST, a behavior I want to achieve.
But the problem is about the outline around the form. The outline shows when we click the form. It's minor, but it would be great to make the form (or input) lose the outline.
I test it using Firefox 3.6 and flock. Both of them show the outline behavior that I want to avoid.
<div id="hdrRight">
<form name="input" action="/home.html" method="post" id="buttonform" >
<input type="submit" value="" id="gohome" />
</form>
#----- CSS part
#hdrRight {
float:left; width:420px;
height:30px;
padding:0;
}
form#buttonform{
background-color:transparent;
border:none;
clear:both;
outline:none;
}
input#gohome{
padding:0;
margin:0;
background-color:transparent;
background-repeat:no-repeat;
width:280px;
height:60px;
border:none;
float:right;
background-image: url('images/gohome.png');
outline:none;
}
input#gohome:hover {
background-image: url('images/gohome_hover.png');
cursor:pointer;
outline:none;
}
Can you explain why this is happening and how to hide the outline?
Insert this in your CSS file for the site
form input
{
border: none;
outline: none;
}
And done.
Following Removing The Dotted Ouline:
This is default styling for the
purpose of accessibility. For folks
without the ability to use a mouse,
they still need some visual indicator
that they currently have a link active
(so, for example, they can press enter
to navigate to that link).
After creating a small test page locally, I see the following in Chrome:
Screen shot http://img714.imageshack.us/img714/7445/googlechromescreensnapz.jpg
With this CSS code (I added the borders so I can see where the form is and where the button is, note that the Lorem Ipsum is inside the form):
#hdrRight {
float:left; width:420px;
height:30px;
padding:0;
}
form#buttonform{
background-color:transparent;
border:1px solid black;
clear:both;
outline:none;
}
input#gohome{
padding:0;
margin:0;
background-color:transparent;
background-repeat:no-repeat;
width:280px;
height:60px;
border:1px solid black;
float:right;
background-image: url('images/gohome.png');
outline:none;
}
input#gohome:hover {
background-image: url('images/gohome_hover.png');
cursor:pointer;
border: 1px solid blue;
outline:none;
}
Actually, the "outline: none;" only works for anchor tags, not input tags or button tags (please try testing a sample HTML page in Firefox if you don't believe me).
Since the browser in question is Firefox, there is a browser specific rule for this.
input::-moz-focus-inner { border: 0; }
Appy...
border: none;
to your input
Related
Hi I have a few links in my html page and I want to set up a notification badge (using css) beside my links which I already did but I am not sure how to make the notification badges disappear once the user clicks the link.
CSS:
.badge1 {
position:relative;
}
.badge1[data-badge]:after {
content:attr(data-badge);
position:absolute;
top:-10px;
right:-10px;
font-size:.7em;
background:red;
color:white;
width:30px;height:18px;
text-align:center;
line-height:18px;
border-radius:50%;
box-shadow:0 0 1px #333;
}
HTML:
</span>Upcoming Job Bidding<br>
</span>7-11 Online Store<br>
EDIT: it doesn't work
I guess you can use this:
a:visited .badge1:after{
content: none;
}
Yeah, my titles suck :p
So I have a container, which contains <div>s. Dotted in this container are <span>s that mark off labels. These <span>s have position:absolute to make them not interfere with the layout of the <div>s.
#container {
border:1px solid red;
width:270px;
}
#container>div {
display:inline-block;
width:80px;
height:80px;
border:1px solid blue;
margin:4px;
}
#container>span {
position:absolute;
background:#ccf;
}
<!-- Please forgive the lack of spaces - this DOM is dynamically generated -->
<div id="container"><span>Marker</span><div></div><div></div><span>Marker</span><div></div><span>Marker</span><div></div><div></div></div>
In Internet Explorer, this works fine.
In Chrome, it does not. The label falls out of the box.
I understand why this happens - it's because the <span> has zero width and height within the flow of the document, allowing it to squeeze into the zero remaining space.
But I'm wondering if there's any other way to achieve the effect I want here?
EDIT: Desired effect, Chrome's bad effect
don't really quite get where you want them, something like this ? added display block to the span.
#container {
border:1px solid red;
width:270px;
}
#container>div {
display:inline-block;
width:80px;
height:80px;
border:1px solid blue;
margin:4px;
}
#container>span {
display:block;
position:absolute;
background:#ccf;
}
<!-- Please forgive the lack of spaces - this DOM is dynamically generated -->
<div id="container"><span>Marker</span><div></div><div></div><div></div><span>Marker</span><div></div><div></div></div>
strong text
Borrowing ideas from #Billy and with help from #JacobGray in the comments, the following solution applies display:block to <span>s, but only if the immediately follow an Nth <div>, N being the number of columns.
It works, but I'm not too happy with it being dependent on a constant number of columns - not great for responsive design ;) Better solutions are of course welcome.
#container {
border:1px solid red;
width:270px;
}
#container>div {
display:inline-block;
width:80px;
height:80px;
border:1px solid blue;
margin:4px;
}
#container>span {
position:absolute;
background:#ccf;
}
#container>div:nth-of-type(3n)+span {
display:block;
}
<!-- Please forgive the lack of spaces - this DOM is dynamically generated -->
<div id="container"><span>Marker</span><div></div><div></div><span>Marker</span><div></div><span>Marker</span><div></div><div></div></div>
Adding display:block to the span is what I'd suggest, or putting a marker span inside every div you want to label.
If I understand well, try this. Put tags <span> into each <div> that you want have a "label". Add position:relative to all <div> and set the properties top and left for the span.
Ps. I've modified your code below, but you should use classes
#container {
border:1px solid red;
width:270px;
}
#container>div {
display:inline-block;
width:80px;
height:80px;
border:1px solid blue;
margin:4px;
position: relative;/* added */
}
#container>div>span {/* modified */
position:absolute;
background:#ccf;
top:-5px;/* added */
left:-5px;/* added */
}
<div id="container"><div><span>Marker</span></div><div></div><div><span>Marker</span></div><div><span>Marker</span></div><div></div></div>
I'm trying to build a button that has some notification attached to it and am trying to emulate the facebook notification styles. A little red circle in the top right corner with a number in it.
I'm having some issues with it though. I can't seem to get the circle in the right place or to get the number to actually sit inside of it.
my button looks like this
<button class="btn btn-blue" id="noteBtn">Notes <span class="notification">1</span></button>
and I've tred to do this with my css
.notification:before {
content: ' \25CF';
font-size: 5em;
color:red;
}
here is a js fiddle I was working with
http://jsfiddle.net/N8cjB/5/
<span> and I don't get along, so I changed it to a <div>
Here you go: http://jsfiddle.net/aXvqW/3/
edit moved it out of the button a little bit, as requested.
To make it simple you don't need :before.
Add border-radius to the span, and to center the number use text-align: center
.notification {
border-radius: 30px;
text-align: center;
border: red;
width:20px;
height:10px;
background: red;
padding: 2px;
}
Check this in fiddle
Change <span> to <div> and make button position:relative; and notification position:absolute; using CSS then put it wherever you want.
Check it out here: http://jsfiddle.net/N8cjB/26/
Code
.button{
margin:20px 0px;
border:1px solid #e2e2e2;
background:#f9f9f9;
padding:5px 10px;
position:relative;
cursor:pointer;
transition:all 0.4s;
}
button:hover{
background:#333;
border:1px solid #333;
color:#fff;
}
.notifications {
position:absolute;
border-radius:2px;
font-size:14px;
background-color:red;
color:#fff;
padding:2px 5px;
top:-10px;
right:-10px;
}
<button class="button">
Notes<div class="notifications">1</div>
</button>
I have following code to display the image in button using CSS, but I am unable to get it working. The image is in the same directory where the CSS file is.
#submit-go {
margin-top:1em;
width:69px;
height:26px;
text-indent:-9999px;
overflow:hidden;
border:0;
background:url(submit-button.gif) no-repeat 0 0;
display:block;
cursor:pointer !important; cursor:hand;
}
#submit-go:hover {
background-position:0 -26px;
}
<div align="center"><button type="submit" id="submit-go" >Submit</button></div>
It may be because background is still overriding background-position. Try changing background to this:
#submit-go {
margin-top:1em;
width:69px;
height:26px;
text-indent:-9999px;
overflow:hidden;
border:0;
background-image:url(submit-button.gif);
background-repeat: no-repeat;
background-position: 0 0;
display:block;
cursor:pointer !important; cursor:hand;
}
I created this fiddle with your code http://jsfiddle.net/rDvTe/1/ and think it works properly tested in Chrome).
I replaced the image link with a URL so it would work, and also added
#submit-go {border: 1px solid red;}
to better see the button.
Am I right if I suppose you wanted the background-image to show up on hover? Else just switch the background-position in normal and hover state.
Hope this is what you were looking for.
i can't figure out what makes an html button element appear to be pushed (right click an html button and then hover on and off to see what i mean).
the following two examples i've taken from other websites. the first has the typical button push effect. the second does not.
.button {
border:none 0;
background-color:Transparent; }
.button .l { background:url('img.gif') no-repeat 0 0;
padding-left:7px;
display:block;
height:32px; }
.button .c { background:url('img.gif') repeat-x 0 0;
display:block;
height:32px;
padding-top:7px; }
.button .r {
background:url('img.gif') no-repeat right top;
padding-right:7px;
display:block;
height:32px; }
and
.button {
background:#F0F0F0 url(img.gif) repeat-x scroll 0 0;
border:1px solid Black;
color:#333333;
font-size:12px;
height:20px;
padding-left:8px;
padding-right:8px; }
EDIT: # mr skeet, i want a button that will look the same in all browsers (ie. background image) but still behave like a real html button with the push effect. am i correct in assuming that i'll need javascript for this? and different css for the push state? an example/tutorial would be awesome
Either use
<input type="button" value="Click Me"/>
which will automatically act like a button, or use the :hover and :active CSS pseudo classes to get what you want...
a.likeAButton {
background-color:#67a0cf;
border:1px outset #2683cf;
color:#fff;
padding:3px 3px 3px 3px;
margin:1px;
text-decoration:none;
}
a.likeAButton:hover {
background-color:#5788af;
border:1px outset #2683cf;
color:#fcffdf;
padding:3px 3px 3px 3px;
margin:1px;
text-decoration:none;
}
a.likeAButton:active {
background-color:#67b4cf;
border:1px inset #1d659f;
color:#e0ffaf;
padding:4px 2px 2px 4px;
margin:1px;
text-decoration:none;
}
Fake Button
you can also add border radius to every element such as a.likeabutton, a.likeabutton:hover and all. this wil give it a good look. If we can make it like a list of Button then it will have a better Navbar feature, I tried this though, it position of these buttons does no remain same in Maximized and restored borwser.