Problem mit schwarzen Linien in Submit Button

[psifactory]

Abend,

hab hier gerade ein Problem mit schwarzen Linien um einen Submit button wenn ich den per onclick ne andere klasse zuweiße. (s.h. Screenshot)

.searchbutton {
	background:#c9c9c6 url(../img/searchbutton.gif) no-repeat;
	background-position:left top;
	width:22px;
	height:22px;
	position:absolute;
	border:1px solid #c9c9c6;
	margin:3px 0 0 0;
}

.searchbutton:hover {
	background:#58575C url(../img/searchbutton.gif) no-repeat;
	background-position:0px -24px;
}

.searchbutton_click {
	background:#585750 url(../img/searchbutton.gif) no-repeat;
	background-position:left bottom;
	width:22px;
	height:22px;
	position:absolute;
	border:1px solid #c9c9c6;
	margin:3px 0 0 0;
}

            <input type="submit" id="searchbutton" class="searchbutton" value="" onmousedown="this.className='searchbutton_click'" onmouseup="this.className='searchbutton'"/>

 

[Maik]

Hi,

der gepunktete Rahmen stellt den Fokus des aktiven Elements dar, so wie beim Anklicken eines Links, und lässt sich hiermit abstellen:

onfocus="this.blur()"

mfg Maik

 

[psifactory]

Hi,

der gepunktete Rahmen stellt den Fokus des aktiven Elements dar, so wie beim Anklicken eines Links, und lässt sich hiermit abstellen:

onfocus="this.blur()"

mfg Maik

aber hab ich das nicht anhand meiner reset.css mit

:focus {
	outline: 0;
}

schon ausgeschlossen?

reset.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

 

[Maik]

Wie du selber siehst, greift die CSS-Regel

/* remember to define focus styles! */
:focus {
	outline: 0;
}

beim input-Element überhaupt nicht.

Übrigens wird outline auch nicht von allen Browsern gleichermaßen unterstützt, den IE kannst du z.B. komplett von der Liste streichen.

mfg Maik

 

[psifactory]

Wie du selber siehst, greift die CSS-Regel

/* remember to define focus styles! */
:focus {
	outline: 0;
}

beim input-Element überhaupt nicht.

Übrigens wird outline auch nicht von allen Browsern gleichermaßen unterstützt, den IE kannst du z.B. komplett von der Liste streichen.

mfg Maik

aahhh damn f****** Internetexplorer. Gibts dafür noch einen anderen Workaround (Ohne JS) ?

 

[Maik]

Nö.

Die vorgeschlagene Lösung soltte für dich aber keine Barriere darstellen, wenn du ebenso mit JS die Klassennamen tauschst

Achja, an dieser Stelle möchte ich für den IE eine Lanze brechen, denn Firefox ignoriert die besagte CSS-Regel ebenso, obwohl er die outline-Eigenschaft grundsätzlich zu interpretieren weiß.

mfg Maik