-webkit-tap-highlight-color: rgba(0,0,0,0);And then to allow :active styles to work in your CSS on a page in Mobile Safari:
document.addEventListener("touchstart", function(){}, true);
Dotted borders around links are an accessibility feature most browsers have by default. It's for users who must or choose to navigate by keyboard, there is a visual style applied to those links when "tabbed" to. These borders also show up when the link is clicked (in it's "active" state), and can be an eyesore depending on the design (especially when using something like CSS image replacement, the borders span the length of the screen). You can remove them with this:
a:active {
outline: none;
}NOTE: The advantage here is that the :focus style still will use the outlines, meaning that keyboard navigators will still have the focus styling/visual feedback.
Demo:
.field { position:relative; font-family: Arial; text-transform:uppercase; font-weight:bold; display:inline-block; }
label { position:absolute; left:0; top:0; transition: all .2s linear; color:#999; font-size:10px; }
input { margin-top:15px; border:1px solid #999; padding:3px 2px; }
input:invalid + label { top:3px; opacity:0; }
input:valid + label { opacity:1; top:0; }
input:focus { outline:none; }
input:focus + label { color:#33A; }
The code is only a few lines long
<html lang="en">
<head>
<title>Simplest jQuery Slideshow</title>
<style>
body {font-family:Arial, Helvetica, sans-serif; font-size:12px;}
.fadein { position:relative; height:332px; width:500px; }
.fadein img { position:absolute; left:0; top:0; }
.fadelinks, .faderandom { position:relative; height:332px; width:500px; }
.fadelinks > *, .faderandom > * { position:absolute; left:0; top:0; display:block; }
.multipleslides { position:relative; height:332px; width:500px; float:left; }
.multipleslides > * { position:absolute; left:0; top:0; display:block; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
</script>
</head>
<body>
<h1>
Simplest jQuery Slideshow</h1>
Check out the <a href="https://www.blogger.com/archives/javascript/simplest-jquery-slideshow">blog post</a>.
<div class="fadein">
<img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" />
<img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg" />
<img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg" />
</div>
<h2>
More Simple jQuery Slideshow: Random</h2>
<script>
$(function(){
$('.faderandom > :gt(0)').hide();
setInterval(function(){
var rand = Math.floor(Math.random() * ($('.faderandom').children().length-1));
$('.faderandom > :first-child').appendTo('.faderandom').fadeOut();
$('.faderandom > *').eq(rand).prependTo('.faderandom').fadeIn();
}, 3000);
});
</script>
<div class="faderandom">
<a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" /></a>
<a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg" /></a>
<a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg" /></a>
</div>
<h2>
More Simple jQuery Slideshow: With Links</h2>
<script>
$(function(){
$('.fadelinks > :gt(0)').hide();
setInterval(function(){$('.fadelinks > :first-child').fadeOut().next().fadeIn().end().appendTo('.fadelinks');}, 3000);
});
</script>
<div class="fadelinks">
<a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" /></a>
<a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg" /></a>
<a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg" /></a>
</div>
<h2>
More Simple jQuery Slideshow: Multiple Slideshows</h2>
<script>
$(function(){
$('.multipleslides').each(function(){
// scope everything for each slideshow
var $this = this;
$('> :gt(0)', $this).hide();
setInterval(function(){$('> :first-child',$this).fadeOut().next().fadeIn().end().appendTo($this);}, 3000);
})
});
</script>
<div class="multipleslides">
<a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" /></a>
<a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg" /></a>
<a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg" /></a>
</div>
<div class="multipleslides">
<a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" /></a>
<a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg" /></a>
<a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg" /></a>
</div>
</body>
HTML:
<input class="button" type="button" value="Go">
.. or ..
<button class="button">Go</button>CSS:
input.button { text-indent: -9000px; text-transform: capitalize; }Negative-indent alone unfortunately doesn't work to remove text from a button element in IE7, but add text-transform: capitalize; and presto!
Slightly lighter color (assuming your text is black), dotted bottom border, and a question-mark cursor. This has become a somewhat standardized approach, which is always a good thing in design usability.
abbr {
border-bottom: 1px dotted #222;
color: #222;
cursor: help;
}
@media print{
a:after{content:" (" attr(href) ") ";font-size:0.8em;font-weight:normal;}
}