<- I mean this dotted border (top-left corner is shown).
It supposed to be a button with link. It looks great, but when I click on it, browser draws a border around it. If I remove the <a> from code and click again, border won't be drawn
CSS:
#button{
padding: 0.5em;
margin: 0 auto;
border-radius: 3px;
background-color: #B3C833;
font-family: 'Consolas',monospace;
font-size: 3em;
display: inline-block;
}
HTML:
<a href="#">
<div id="button">
<span id="pref">http://</span><span id="addr">example.com</span>
</div>
</a>
You need to add this porperty:
a {
outline:none;
}
That border is there for accessibility, and shouldn't be removed. It allows people that are disabled and accessing your site via keyboard to see where the focus is.
Check out outlinenone.com
If you don't mind losing a portion of your traffic, you can remove it anyway with:
a {
outline:none;
}
Related
At least in firefox, when I try to drag an image (the one on the left), I get a thin white border on the bottom and the right. And when I wrap the image in an <a> then I get a red border around the whole thing. How can I drag an element without these borders appearing in both cases? (In the stackoverflow code preview it might not show the border for the image on the left but it shows it if you try with an html file in your browser.)
body {
background-color: black;
}
a {
padding: 30px;
background-color: black;
display: inline-block;
border: none;
}
img {
border: none;
}
<img src="https://picsum.photos/200/200">
<a href>
<img src="https://picsum.photos/200/200">
</a>
This appears to be a usability feature of Firefox, so people know what they're dragging (IIRC, a linked image is just the link while an unlinked image is the image itself). You can fake that out by using onclick instead.
In this sample, I've added a third copy of the sample image (nice random effect, btw). I've changed the mouse cursor to look the way it does for a link and set the link target in the title attribute so it can be seen during a mouseover event. Upon clicking, Javascript will then set the current page location to the contents of that title.
This of course introduces another (imho even worse) usability issue: users can't right-click or middle-click on that link, say to copy the link or open it in a new tab. They (obviously) can't drag the link anywhere either.
(I shrank the images and the padding so they can still appear three abreast in a single non-wrapping row.)
body {
background-color: black;
}
a {
padding: 5px;
background-color: black;
display: inline-block;
border-color: none;
}
a.fake_link[onclick] {
cursor:pointer;
}
img {
border: none;
width: 175px;
}
<img src="https://picsum.photos/200/200">
<a href>
<img src="https://picsum.photos/200/200">
</a>
<a title="https://stackoverflow.com" class="fake_link"
onclick="location.href=this.title">
<img src="https://picsum.photos/200/200">
</a>
(If you want to experiment with that but stay on this page, just change the onclick value to alert(this.title) instead of location.href=this.title)
I've tried calling the id in css and changing it with important and other options and I've come to not be able to figure out how to make it work.
https://jsfiddle.net/6p0wmpr1/
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 25px;
}
.dialog{
padding:0px !important;
}
<div hidden class="dialog" id="dialog-message" title="Download complete">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
Your files have downloaded successfully into the My Downloads folder.
</p>
<p>
Currently using <b>36% of your storage space</b>.
</p>
</div>
It's not padding. Its "helper" divs added when you create the modal dialog. Add this to your css:
.ui-resizable-handle
{
display:none !important
}
If the gray box around your ok button bothers you (Because it bothers me), you can fix that with this:
.ui-dialog-buttonset
{
background: white
}
I have a button on a form;
<button type="button" class="button" onclick="validate_form_newsletter_wide( form )"><img src="index_htm_files/btn_newsletter_wide.png" alt="Send"></button>
It styled using;
<style>
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
#form_newsletter_wide .button {
position:relative;
float: right;
cursor:pointer;
border: 0px;
padding: 0px;
margin: 0px;
margin-top: -1px;
z-index:100;
}
</style>
When clicked in Firefox nothing about the button changes, in Chrome I get a highlight border around the button which I can live with but in IE it's more of a pressed effect where the button almost seems to move down and right. Is there anyway to prevent this?
It's a browser behaviour, a simple solution is to use a link tag instead of button (since you're calling a javascript function).
<img src="myimg"/>
If you still want to use the , I've found that there are some characteristics on each browser (in a simple debug):
Chrome adds outline and padding
Firefox adds a whole lot of stuff with the standart button border
IE messes with the inner text position
So to fix them, you have to manipulate the pseudo selectors for the button behaviour. And for IE, a good solution is to envolve your text on a element, and make it relative positioned. Like so:
<button type="button" class="button"><span>Buttom or Image</span></button>
<style>
button,
button:focus,
button:active{
border:1px solid black;
background:none;
outline:none;
padding:0;
}
button span{
position: relative;
}
</style>
Pen
I read once how to create cross-browser rounded buttons with shadow using images, I lost my bookmarks unfortunately that's why I ask does anybody remember the technique.
There is left side picture i.e
And then very wide body image which ends up with right curved border/shadow like this :
So at the end you end up with one button which can be used with multiple sizes? I was googling this, but it seems noways everyone use css without images.
Does anybody knows how this technique is called or can refer me to the link? or give me code example, I'd appreciate any of those
When using an image for the start and one for end of the button, these technique is called "sliding doors" and there are myriads of search results with any search engine…
For an introduction read the A List Apart article: http://www.alistapart.com/articles/slidingdoors
But as Neurofluxation asked you in the comment above: Why the hell would you do that years after we have multiple other methods of styling a button in CSS? The A List Apart article for example is from 2003 - which is an age in Internet terms.
This technique is a variation of the "Sliding Doors" technique:
http://www.alistapart.com/articles/slidingdoors/
http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/
http://azadcreative.com/2009/03/bulletproof-css-sliding-doors/
Basically you use markup like this:
<button><span>Text</span></button>
Then style the span with the edge image to the side, overlapping the main background image of the parent element. Something like this:
button {
background:url(main-image.png) top right no-repeat;
border:0;
padding:0;
width:80px; /* with only 1 "door", you might need to set a width */
/* other resets may be necessary */
}
span {
background:url(left-door.png) left top no-repeat;
}
button, span {
height:37px; /* height of your sprite */
display:block;
}
Demo: http://jsfiddle.net/Kqs3m/
Your results may vary depending on your sprites and the natural width of the content.
Here's the technique which I think you are looking for (using the same images you attached):
HTML:
<a href="#" class="button">
<span>Small</span>
</a>
<a href="#" class="button">
<span>Large button</span>
</a>
CSS:
.button {
background: url('http://i.stack.imgur.com/htUHL.png') no-repeat left top;
padding-left: 9px;
height: 37px;
display: inline-block;
text-decoration: none;
color: #555;
text-shadow: 0 1px 1px #FFF;
font-family: sans-serif;
font-size: 0.8em;
}
.button span {
background: url('http://i.stack.imgur.com/ID6nO.png') no-repeat right top;
display: inline-block;
height: 37px;
padding: 5px 12px 5px 3px;
}
.button:hover span {
color: #333;
}
Link to the demo: http://jsfiddle.net/v284q/
Using CSS properties instead of images can make your applications faster.
In this case you could just use: Border-Radius, Box-Shadow combined with a gradient background.
Here you can find a good Gradient Editor:
http://www.colorzilla.com/gradient-editor/
How to use Border-radius and Box-shadow:
http://www.css3.info/preview/rounded-border/
http://www.css3.info/preview/box-shadow/
How do I create a similar “search” element to the one in this site?
If we view source, he has one textbox followed by a <span> tag.
<input type="text" name="q" id="site-search-input" autocomplete="off" value="Search" class="gray" />
<span id="g-search-button"></span>
Where do I get a similar "magnifying glass" image?
Put the image into the span, for example using background-image, then give it a relative position and move it to the left so it overlaps the right end of the search box, for example:
#g-search-button {
display: inline-block;
width: 16px;
height: 16px;
position: relative;
left: -22px;
top: 3px;
background-color: black; /* Replace with your own image */
}
Working example on JSBin
Your eyes are deceiving you. The button is not within the text box. Using a background image is NOT the way to go, as it wont provide the clickable submit button.
What you need to do is add a wrapper div around the input:text and input:submit.
The wrapper will look like it's a text box, but will actually contain a transparent text box and a submit button. You'll need to specifically remove the styles for the input:text and input:submit elements.
It's very important that you keep the submit button, otherwise hitting enter while searching will not have a default reaction. Additionally placing the submit button after the text field allows people to actually click on the button.
You can make your own magnifying image, they're pretty easy to make in a 20x20px transparent png.
.search {
border: 1px solid #000000;
width: 200px;
}
.search input[type="text"] {
background: none;
border: 0 none;
float: left;
height: 1.5em;
line-height: 1.5em;
margin: 0;
padding: 3px 0;
width: 180px;
}
.search input[type="submit"] {
background: #CCCCCC url(path/to/image.jpg);
border: 0 none;
height: 1.5em;
line-height: 1.5em;
margin: 0;
padding: 3px 0;
text-indent: 100px;
width: 20px;
}
<form ...>
<div class="search">
<input type="text" />
<input type="submit" />
</div>
</form>
If you view the page in Google Chrome, right-click on the search button and select “Inspect element”, you’ll be able to see the CSS used to achieve this effect.
If you’re not familiar with CSS, I thoroughly recommend ‘CSS: The Definitive Guide’.
A site like Iconspedia has a number of free icons that are similar.
Wherever you get the icon be careful to ensure that you have the rights to use it in your application. Many graphics are protected and some have restrictive licenses.
If you use a background image on the field then there's no way to bind to it to get the click action. So the solution is to have a separate search field and image, so you can bind click event in jQuery to the image. Fiddle here:
http://jsfiddle.net/Lzm1k4r8/23/
You can adjust left: position to be left or right side of the search box.
To help with user feedback why not add the pointer icon to your mouse when you're hovering over the magnifying glass? Just att this to your CSS:
.search:hover {
cursor:pointer;
}
I'd like to plug a new jQuery plugin I wrote because I feel it answers to the OP's request.
It's called jQuery.iconfield: https://github.com/yotamofek/jquery.iconfield.
It lets you easily add an icon to the left side of your text field. For using the icon as a button, you can easily bind to the 'iconfield.click' event, which is triggered when the user clicks the icon. It also takes care of changing the cursor when the mouse is hovering over the icon.
For instance:
$('#search-field').iconfield( {
'image-url': 'imgs/search.png', // url of icon
'icon-cursor': 'pointer' // cursor to show when hovering over icon
} );
$('#search-field').on( 'iconfield.click', function( ) {
$('#search-form').submit()
}
I would love to get some feedback on my work.