Kontextmenü in Eingabefeldern

Endor

Hier hätte ich noch einen, der ist für die Leiste die manchmal aufgeht,
wenn man eine Pdf Datei in Firefox öffnet und die Möglichkeit bietet,
die Pdf Datei in einem anderen Programm zu betrachten.

Code:

CSS

@-moz-document url-prefix("chrome://browser/content/browser.xul") {
button[label="Mit anderem Programm ansehen"]{
        list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACLUlEQVQ4ja3SS0iUYRjF8S8Sp0mSFM0wcwwaL10wUQocJYUY3WgmQRfRLt7ScqOYZSBCWdYiKoKghAwRiwhpU+gmJSLTosyihaVmaHYxMvzOu/y3iJgR0iA68Oze83t44bGs/x3z6SM634Sq96HiXOzCLExRHmqsx0xOsGBZ3XdRYwkavI0G2tGJvai5FDUWoiN5aJMLdbT/GdH9TuwbDWiqB/VexJzcgX36DMpMRiVbUVEGyk9FCRGorW0uYibHsY8XoOEu1NWE6TyKqrdh+vuRhLJSUH4yyk5C3kSmI4LR2AcfolP1qKcV3TuLuVmD6ahBlw6g2vJfgIR2pmF71qK0WL6ti2S8osoPKM5DD1oxFemYzCiMNxqTFYPcFqo75EMOetGGFXyPDWcoyuUH5KRitzaiPfm+x/NN7S6mI4MYWGL5Ad5k1FyOqkr/CthX6pgIXkSfww8w2WnYx4owHhdavwwlhqCUMJQYhOp2+8rXG1CMgzdBFv1hUT7APlzGbNl2lJOC8rag3M0oIwG7rsC3/dY5tMbJl5BAXjktXhZV+H1hdATFRyFvEkpPQJ54tDECvehFEubOBRTjwF7pZMhp0RdoMfNudO4t2C3XsN2hyONGyS7kDkHPulFXG8YVwNfQAIacFs8DLCYvt8xzjVdbmFruxI4Lx44J5kdcCJ/DFzO81OK10+KRY4Hy78yOjPG2uJLBVdE8cVg8dFg8DlvN0/2VzIy8X7j8L/kJ4FPj89ElOyMAAAAASUVORK5CYII=") !important;}

		button[label="Mit anderem Programm ansehen"] .button-text{ margin-left:10px!important;}
}

Mfg.
Endor

Endor

Ich habe da mal wieder ein Problem.
Ich verwende ja für CSS Codes das Script usercssloader.uc.js von der dunklen Seite.

Diese Fenster gehören dazu:

[Blockierte Grafik: http://img404.imageshack.us/img404/5550/bild001y.png][Blockierte Grafik: http://img90.imageshack.us/img90/2421/bild002n.png]

Wie spreche ich die drei Buttons unten an?
Ich habe im Script extra noch eine id für die Buttons vergeben, aber nichts will funktionieren.
Als url wird im Domi folgendes angezeigt:

Code

data:text/html;charset=utf8,%3C!DOCTYPE%20HTML%3E%3Chtml%20lang%3D%22ja%22%3E%3Chead%3E%3Ctitle%3ECSSTester%3C%2Ftitle%3E%3C%2Fhead%3E%3Cbody%3E%3C%2Fbody%3E%3C%2Fhtml%3E

Wer hat eine Idee?
Mfg.
Endor

2002Andreas

CSS

input[value="Vorschau"]{
-moz-appearance:none!important;
background: blue url("data:image/gif;base64,R0lGODlhEAAQAOZQAP///wBmAPv6+gBzAIjtUXnePiczPqn/cSgzP/n8/vf5/LvFz+3y9/D0+bzG0AAbiSo1Qb/J0/b4+5z/Zuzx9rzH0WJqdbvFzvz9/m14g7jBzB6q/3J+iABky2Ntdw2JB8HL1b/J0sbP2Gpzf/n7/K7h/xSNCiiXFsrT2/38/Pr6+8XJzj+fDiaWFSKs/7nnGOfr7ubp7CSv/wBdyACZAAuIBg6gBxelDNbz/3uIlHmDkABaxc3w/xOMCQBgyUpUXun3BQAbigAcigmIBQBfyQBDsABcyPn6/MfQ2UpTXgqeBc3V3sPN1lzIMYyVms7x/////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAFAALAAAAAAQABAAAAe/gFCCg4IBhoeEiQEHjI0BiYUTTUAvLQMmEwEdRDNGOwIBBCcDLAMAAwQBPiVPPDigBKamp6kdMhsbLrCzpx+pRUIPD0GwPbIfNqlOAMwAoAU3NQNDSjQFATnNADDPBd7eAQI6SyIiSCgxoIeGAiscAEckGEwYKgL3+CkcGQASCgkREij4F1CBBAAZRoC4sMBBCAcLGj5ccAHECA8AKDBooKEBg40dGVAA4MGCtgontVlIgsCAAQQQWr6M6RLBj0AAOw==") no-repeat !important;
color:white;
font-size:11.5px!important;
height:22px!important;
padding-left:25px!important;
background-position:3px 1px!important;
border-radius:10px!important}

[Blockierte Grafik: http://www7.pic-upload.de/thumb/08.03.13/9o664wltttn1.jpg]

Musst du dir bitte noch anpassen wie du es möchtest.

Endor

Vielen Dank.
Werde ich gleich mal testen.

Ich wollte eigentlich den Buttons nur ein Symbol verpassen. :wink:
Mfg.
Endor

2002Andreas

Habe einfach einen fertigen Code genommen und nur die Bezeichnung/Namen geändert :wink:

Endor

Passt doch prima.
:klasse:
Frage dazu, wie kriege ich nur beim Icon links 5 px Abstand zum Rand?
Mfg.
Endor

2002Andreas

Durch ändern dieser Werte, musst du mal fummeln :wink:

background-position: 12px 1px!important;

den Text verschieben mit ändern von

padding-left:35px!important;

Extra mal etwas übertrieben mit den Werten

[Blockierte Grafik: http://www7.pic-upload.de/thumb/08.03.13/rnbm4jt3zsox.jpg]

2002Andreas

[Blockierte Grafik: http://www10.pic-upload.de/thumb/08.03.13/2tis3dojwbeb.jpg]

CSS

input[value="Vorschau"],
input[value="Speichern"],
input[value="Schließen"]{
-moz-appearance:none!important;
background: lightgray url("data:image/gif;base64,R0lGODlhEAAQAOZQAP///wBmAPv6+gBzAIjtUXnePiczPqn/cSgzP/n8/vf5/LvFz+3y9/D0+bzG0AAbiSo1Qb/J0/b4+5z/Zuzx9rzH0WJqdbvFzvz9/m14g7jBzB6q/3J+iABky2Ntdw2JB8HL1b/J0sbP2Gpzf/n7/K7h/xSNCiiXFsrT2/38/Pr6+8XJzj+fDiaWFSKs/7nnGOfr7ubp7CSv/wBdyACZAAuIBg6gBxelDNbz/3uIlHmDkABaxc3w/xOMCQBgyUpUXun3BQAbigAcigmIBQBfyQBDsABcyPn6/MfQ2UpTXgqeBc3V3sPN1lzIMYyVms7x/////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAFAALAAAAAAQABAAAAe/gFCCg4IBhoeEiQEHjI0BiYUTTUAvLQMmEwEdRDNGOwIBBCcDLAMAAwQBPiVPPDigBKamp6kdMhsbLrCzpx+pRUIPD0GwPbIfNqlOAMwAoAU3NQNDSjQFATnNADDPBd7eAQI6SyIiSCgxoIeGAiscAEckGEwYKgL3+CkcGQASCgkREij4F1CBBAAZRoC4sMBBCAcLGj5ccAHECA8AKDBooKEBg40dGVAA4MGCtgontVlIgsCAAQQQWr6M6RLBj0AAOw==") no-repeat !important;
color:black;
font-size:12.5px!important;
height:25px!important;
padding-left:23px!important;
background-position: 5px 2px!important;
}

Alles anzeigen

Icons natürlich anpassen :wink:

Endor

Vielen Dank Andreas funktioniert schon.
Eine Frage : ich habe mir noch einen Hower Effekt eingebaut.

CSS

input[value="Schließen"]:hover{
    -moz-appearance: none !important; 
    background: powderblue url("data:image/gif;base64,R0lGODlhEAAQAOZQAP///wBmAPv6+gBzAIjtUXnePiczPqn/cSgzP/n8/vf5/LvFz+3y9/D0+bzG0AAbiSo1Qb/J0/b4+5z/Zuzx9rzH0WJqdbvFzvz9/m14g7jBzB6q/3J+iABky2Ntdw2JB8HL1b/J0sbP2Gpzf/n7/K7h/xSNCiiXFsrT2/38/Pr6+8XJzj+fDiaWFSKs/7nnGOfr7ubp7CSv/wBdyACZAAuIBg6gBxelDNbz/3uIlHmDkABaxc3w/xOMCQBgyUpUXun3BQAbigAcigmIBQBfyQBDsABcyPn6/MfQ2UpTXgqeBc3V3sPN1lzIMYyVms7x/////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAFAALAAAAAAQABAAAAe/gFCCg4IBhoeEiQEHjI0BiYUTTUAvLQMmEwEdRDNGOwIBBCcDLAMAAwQBPiVPPDigBKamp6kdMhsbLrCzpx+pRUIPD0GwPbIfNqlOAMwAoAU3NQNDSjQFATnNADDPBd7eAQI6SyIiSCgxoIeGAiscAEckGEwYKgL3+CkcGQASCgkREij4F1CBBAAZRoC4sMBBCAcLGj5ccAHECA8AKDBooKEBg40dGVAA4MGCtgontVlIgsCAAQQQWr6M6RLBj0AAOw==")
    no-repeat !important;
	background-position:14px 1px!important;}

Als Farbe habe ich im Moment: powderblue
Könnte man die Farbe auch irgendwie so konfigurieren, also mit so einem Wert: #CCFFFF
Ich kenne mich damit leider überhaupt nicht aus. :oops:

Mfg.
Endor

2002Andreas

Bitte testen

#B0E0E6

Endor

Das ist mir aber peinlich. :oops:
Einfach Namen durch Wert ersetzen. Oje oje, da hätte ich aber selber drauf kommen
müssen.
Mfg.
Endor

2002Andreas

Muss es nicht sein.

Endor

So geschafft. Jetzt ist es wie ich es haben wollte:
[Blockierte Grafik: http://img713.imageshack.us/img713/4242/hoveri.png]

Code:

CSS

input[value="Vorschau"]{min-width: 120px !important;} 
	input[value="Vorschau"]{
    -moz-appearance:none!important;
    background: gainsboro url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAcElEQVQ4jb3TQQ7AIAhE0Tk6R5ub/W5aYxpE7KIkxJUvoCBJNLIMquggW8B2iXQrWCIlkGA/ViCJiMA2tomIFCkvCxAMIEOWgO1x+QGyHymBOY+BuX/BWQvVI97nt2+cKqAFJJjec9HZxmyQWpu6jQviJAeRVMJt+gAAAABJRU5ErkJggg==") no-repeat !important;
    margin-left:10px !important;
	color:black;
    font-size:14.0px!important;
    height:24px!important;
    padding-left:25px!important;
	padding-bottom: 5px!important; 
    background-position:14px 1px!important;
    border-radius:12px!important;}

	input[value="Vorschau"]:hover{
    -moz-appearance: none !important; 
    background: #ccffff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAcElEQVQ4jb3TQQ7AIAhE0Tk6R5ub/W5aYxpE7KIkxJUvoCBJNLIMquggW8B2iXQrWCIlkGA/ViCJiMA2tomIFCkvCxAMIEOWgO1x+QGyHymBOY+BuX/BWQvVI97nt2+cKqAFJJjec9HZxmyQWpu6jQviJAeRVMJt+gAAAABJRU5ErkJggg==")
    no-repeat !important;
	background-position: 14px 1px!important;}

	input[value="Schließen"]{min-width: 130px !important;} 
	input[value="Schließen"]{
    -moz-appearance:none!important;
    background: gainsboro url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAChElEQVQ4jXWTX0vTARSGX9mULlIEIcKBH8ELxYFCV/YR3NCL2W13Cm3CRJECIYZgzDQUaZa26WozsNpwDJ3tt1EkzCClKLIs+mOIpcW2nE8XDcnUF96bwznPOXDOkU7QUiLBXDjMXDjMUiLBSXlHFJyYIOLx8H1qiv1YjP1YjK3bt5nr72fa5yOdTh8PMwyDQG8v+ZkZCrOzxzrn93OrpwcjmTwMSafT3OnqIjc0RP769SP+/a+Hhrjpdh+exD86ynZHB7suF9tOJ1seD7tOJ79cLn65XPx0OtkuxrIuFzuXLjE5NsZB92BbG5s2G5s2G586Oynk83wZGGCrpYWtlha+DgxQyOfZ7Ozkh83Gjs2Gv72dVCqFFhYWeF5fz1urlXWrlfWGBt51d1PI5dhwu9lwuynkcnzs7uZzQwObVivfrFZWGxuJx+MoHAySqakhc/YsmYoKMmVlZEpKWHM42Mtm2ctmeX3xIm+qq1m3WHhvsbBhsfChpoZwKIRCwSBL5eUkJB5LGBIpiRW7/QCwarezUlLCC7OZNbOZlyYTr8rKCN27h+LxOKGqKh5IRCSiEk+Lxc8cDpaLkzy323kqsSyRkYhXVjI/P49SqRSe8+eZlrgr8ai2lr1sFsPhOIA+KUJStbUkJdIS186dwzCMv5sYHx7Gd/o0PokJs5nZujr8EkGJkMSsRKyujodmM/MSUZOJMa+XQ1d4ub2dkdJSRiRGJcYlfBKTEn6JmSLsvsSV1laS/19jIpGg78IFBsvLGZTwSgz/A5uQ8JlM9LW2sri4ePI/3PB6cTc303/mDNdOncJbWsrVykrcTU0MDw4e7Xyckskk0WiUQCBAIBAgEomcWPgHPg4MXTXSOhMAAAAASUVORK5CYII=") no-repeat !important;
    margin-left:10px !important;
	margin-right: 10px !important;
	color:black;
    font-size:14.0px!important;
    height:24px!important;
    padding-left:25px!important;
	padding-bottom: 5px!important; 
    background-position:14px 2px!important;
    border-radius:12px!important;}

	input[value="Schließen"]:hover{
    -moz-appearance: none !important; 
    background: #ccffff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAChElEQVQ4jXWTX0vTARSGX9mULlIEIcKBH8ELxYFCV/YR3NCL2W13Cm3CRJECIYZgzDQUaZa26WozsNpwDJ3tt1EkzCClKLIs+mOIpcW2nE8XDcnUF96bwznPOXDOkU7QUiLBXDjMXDjMUiLBSXlHFJyYIOLx8H1qiv1YjP1YjK3bt5nr72fa5yOdTh8PMwyDQG8v+ZkZCrOzxzrn93OrpwcjmTwMSafT3OnqIjc0RP769SP+/a+Hhrjpdh+exD86ynZHB7suF9tOJ1seD7tOJ79cLn65XPx0OtkuxrIuFzuXLjE5NsZB92BbG5s2G5s2G586Oynk83wZGGCrpYWtlha+DgxQyOfZ7Ozkh83Gjs2Gv72dVCqFFhYWeF5fz1urlXWrlfWGBt51d1PI5dhwu9lwuynkcnzs7uZzQwObVivfrFZWGxuJx+MoHAySqakhc/YsmYoKMmVlZEpKWHM42Mtm2ctmeX3xIm+qq1m3WHhvsbBhsfChpoZwKIRCwSBL5eUkJB5LGBIpiRW7/QCwarezUlLCC7OZNbOZlyYTr8rKCN27h+LxOKGqKh5IRCSiEk+Lxc8cDpaLkzy323kqsSyRkYhXVjI/P49SqRSe8+eZlrgr8ai2lr1sFsPhOIA+KUJStbUkJdIS186dwzCMv5sYHx7Gd/o0PokJs5nZujr8EkGJkMSsRKyujodmM/MSUZOJMa+XQ1d4ub2dkdJSRiRGJcYlfBKTEn6JmSLsvsSV1laS/19jIpGg78IFBsvLGZTwSgz/A5uQ8JlM9LW2sri4ePI/3PB6cTc303/mDNdOncJbWsrVykrcTU0MDw4e7Xyckskk0WiUQCBAIBAgEomcWPgHPg4MXTXSOhMAAAAASUVORK5CYII=")
    no-repeat !important;
	background-position:14px 2px!important;}

	input[value="Speichern"]{min-width: 120px !important;} 
	input[value="Speichern"]{
    -moz-appearance:none!important;
    background: gainsboro url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACiklEQVQ4ja3R20vTYRjA8Zcuu+iiiy77I/IiFKQiScHKNFeKeZod8NiBSlEbSipOyUOakRp0MguLbFtgWGFlBGqZlie2UtN5yk2dbvu9+237diEFYUZBD3zuHr488AjxP2eHjtg9pbj2VWPTNNBz+AZFmgo2/3Ug6CxbdpeQsreS51F1oGkETQPm7QVs+sdb2BBeycuIGoiogfAK0tZd7bl2fOOQIblpxKR1jDzRKsOm5PEhQ1JSSDGZYWUQVgYhxVxZN/DpYaJ+srsWVc5gdywQWeIlOBd26mBXwaqdOgjOg8BzKNtOEvpLoL85weJc6ENVraiqlVn7NEmVksBzEJS9KvA8hObYqa68Ub7mgvc3411SjuDxmH9yrFg4U+8gIAsCsiC5wsX42Dt6byY41gS6rsVJqfQh5a/cSh+l92YpvPWNFWc/UvbR05jImsDby7HS7epEcXViG23C/DSDEdPR30hh2Khl2KD1DRu1yuCjRL0QQojX5TFSsT9AsbUw8OA47sWvgB9QAScwD0wAZsAEdKJKA/13E9xCCCE6ig5Jaa1haUjP4KM8/H4nfqUbv6sNn7MV7/J9vEu3URcamftQhGf+EotmHd0NR94LIYRo12mkasll6kUWlvYq/GovvuUWfEt38C5cR52vQ52rwjOjZ7orB2Uqn4lXabypiKkXQgjRln3QrX5MZuhOHNZ3jfhdrXhtV/HOVaPOlKFOXcQzmY8cP4+1Mx33WAYDzfE8K4w+IYQQwnQ66outLZyOwmictmZ89lq8U0WokxfwjGfjGT2F/JyKYk7B2pGIrTeO57poT3u2ZqsQQojW1Ij0xxkHpDEzEmNWFMbMyD8yZBxYeZy5/9iPL34HitUiNwkg7hQAAAAASUVORK5CYII=") no-repeat !important;
    margin-left:10px !important;
	color:black;
    font-size:14.0px!important;
    height:24px!important;
    padding-left:25px!important;
	padding-bottom: 5px!important; 
    background-position:14px 1px!important;
    border-radius:12px!important;}	

	input[value="Speichern"]:hover{
    -moz-appearance: none !important; 
    background: #ccffff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACiklEQVQ4ja3R20vTYRjA8Zcuu+iiiy77I/IiFKQiScHKNFeKeZod8NiBSlEbSipOyUOakRp0MguLbFtgWGFlBGqZlie2UtN5yk2dbvu9+237diEFYUZBD3zuHr488AjxP2eHjtg9pbj2VWPTNNBz+AZFmgo2/3Ug6CxbdpeQsreS51F1oGkETQPm7QVs+sdb2BBeycuIGoiogfAK0tZd7bl2fOOQIblpxKR1jDzRKsOm5PEhQ1JSSDGZYWUQVgYhxVxZN/DpYaJ+srsWVc5gdywQWeIlOBd26mBXwaqdOgjOg8BzKNtOEvpLoL85weJc6ENVraiqlVn7NEmVksBzEJS9KvA8hObYqa68Ub7mgvc3411SjuDxmH9yrFg4U+8gIAsCsiC5wsX42Dt6byY41gS6rsVJqfQh5a/cSh+l92YpvPWNFWc/UvbR05jImsDby7HS7epEcXViG23C/DSDEdPR30hh2Khl2KD1DRu1yuCjRL0QQojX5TFSsT9AsbUw8OA47sWvgB9QAScwD0wAZsAEdKJKA/13E9xCCCE6ig5Jaa1haUjP4KM8/H4nfqUbv6sNn7MV7/J9vEu3URcamftQhGf+EotmHd0NR94LIYRo12mkasll6kUWlvYq/GovvuUWfEt38C5cR52vQ52rwjOjZ7orB2Uqn4lXabypiKkXQgjRln3QrX5MZuhOHNZ3jfhdrXhtV/HOVaPOlKFOXcQzmY8cP4+1Mx33WAYDzfE8K4w+IYQQwnQ66outLZyOwmictmZ89lq8U0WokxfwjGfjGT2F/JyKYk7B2pGIrTeO57poT3u2ZqsQQojW1Ij0xxkHpDEzEmNWFMbMyD8yZBxYeZy5/9iPL34HitUiNwkg7hQAAAAASUVORK5CYII=")
    no-repeat !important;
	background-position:14px 1px!important;}

Alles anzeigen

Mfg.
Endor

2002Andreas

Zitat von Endor

wie ich es haben wollte

:klasse:
Perfekt wie immer

Endor

Nicht ganz :mrgreen:
So spricht der Code auch den Vorschau Button hier vom Forum an:
[Blockierte Grafik: http://img543.imageshack.us/img543/56/bild003m.png]

lässt sich das irgendwie verhindern?
Mfg.
Endor

Endor

Hat sich erledigt. Da ich im Script selber ja eine id vergeben haben,
spreche ich jetzt die an und es funktioniert.
Vielen Dank nochmals.
:klasse:
Mfg.
Endor

2002Andreas

Ok, dann teste ich es nicht weiter.

2002Andreas

Zitat von Endor

im Script selber ja eine id vergeben haben

Dann müsstest du bitte mal sagen wo genau, damit andere das auch nutzen können.
Boersenfeger wird doch bestimmt nachfragen :wink:

Boersenfeger

Zitat von 2002Andreas

Boersenfeger wird doch bestimmt nachfragen :wink:

Macht er nicht, da er diesen Code nicht verwendet...

Endor

Ha ha ha.

Im Script, ab Zeile 482 so ändern:

Code

<td><input type="button" value="Vorschau" id="Vorschau" /></td>\
<td><input type="button" value="Speichern" id="Speichern" /></td>\
<td width="80%"><span class="log"></td>\
<td><input type="button" value="Schließen" id="Schliessen" /></td>\

Und hier der CSS Code für die Buttons:

CSS

#Vorschau {min-width: 120px !important;} 
	#Vorschau {
    -moz-appearance:none!important;
    background: gainsboro url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAcElEQVQ4jb3TQQ7AIAhE0Tk6R5ub/W5aYxpE7KIkxJUvoCBJNLIMquggW8B2iXQrWCIlkGA/ViCJiMA2tomIFCkvCxAMIEOWgO1x+QGyHymBOY+BuX/BWQvVI97nt2+cKqAFJJjec9HZxmyQWpu6jQviJAeRVMJt+gAAAABJRU5ErkJggg==") no-repeat !important;
    margin-left:10px !important;
	color:black;
    font-size:14.0px!important;
    height:24px!important;
    padding-left:25px!important;
	padding-bottom: 5px!important; 
    background-position:14px 1px!important;
    border-radius:12px!important;}

	#Vorschau:hover{
    -moz-appearance: none !important; 
    background: #ccffff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAcElEQVQ4jb3TQQ7AIAhE0Tk6R5ub/W5aYxpE7KIkxJUvoCBJNLIMquggW8B2iXQrWCIlkGA/ViCJiMA2tomIFCkvCxAMIEOWgO1x+QGyHymBOY+BuX/BWQvVI97nt2+cKqAFJJjec9HZxmyQWpu6jQviJAeRVMJt+gAAAABJRU5ErkJggg==")
    no-repeat !important;
	background-position: 14px 1px!important;}

	#Schliessen {min-width: 130px !important;} 
	#Schliessen {
    -moz-appearance:none!important;
    background: gainsboro url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAChElEQVQ4jXWTX0vTARSGX9mULlIEIcKBH8ELxYFCV/YR3NCL2W13Cm3CRJECIYZgzDQUaZa26WozsNpwDJ3tt1EkzCClKLIs+mOIpcW2nE8XDcnUF96bwznPOXDOkU7QUiLBXDjMXDjMUiLBSXlHFJyYIOLx8H1qiv1YjP1YjK3bt5nr72fa5yOdTh8PMwyDQG8v+ZkZCrOzxzrn93OrpwcjmTwMSafT3OnqIjc0RP769SP+/a+Hhrjpdh+exD86ynZHB7suF9tOJ1seD7tOJ79cLn65XPx0OtkuxrIuFzuXLjE5NsZB92BbG5s2G5s2G586Oynk83wZGGCrpYWtlha+DgxQyOfZ7Ozkh83Gjs2Gv72dVCqFFhYWeF5fz1urlXWrlfWGBt51d1PI5dhwu9lwuynkcnzs7uZzQwObVivfrFZWGxuJx+MoHAySqakhc/YsmYoKMmVlZEpKWHM42Mtm2ctmeX3xIm+qq1m3WHhvsbBhsfChpoZwKIRCwSBL5eUkJB5LGBIpiRW7/QCwarezUlLCC7OZNbOZlyYTr8rKCN27h+LxOKGqKh5IRCSiEk+Lxc8cDpaLkzy323kqsSyRkYhXVjI/P49SqRSe8+eZlrgr8ai2lr1sFsPhOIA+KUJStbUkJdIS186dwzCMv5sYHx7Gd/o0PokJs5nZujr8EkGJkMSsRKyujodmM/MSUZOJMa+XQ1d4ub2dkdJSRiRGJcYlfBKTEn6JmSLsvsSV1laS/19jIpGg78IFBsvLGZTwSgz/A5uQ8JlM9LW2sri4ePI/3PB6cTc303/mDNdOncJbWsrVykrcTU0MDw4e7Xyckskk0WiUQCBAIBAgEomcWPgHPg4MXTXSOhMAAAAASUVORK5CYII=") no-repeat !important;
    margin-left:10px !important;
	margin-right: 10px !important;
	color:black;
    font-size:14.0px!important;
    height:24px!important;
    padding-left:25px!important;
	padding-bottom: 5px!important; 
    background-position:14px 2px!important;
    border-radius:12px!important;}

	#Schliessen:hover{
    -moz-appearance: none !important; 
    background: #ccffff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAChElEQVQ4jXWTX0vTARSGX9mULlIEIcKBH8ELxYFCV/YR3NCL2W13Cm3CRJECIYZgzDQUaZa26WozsNpwDJ3tt1EkzCClKLIs+mOIpcW2nE8XDcnUF96bwznPOXDOkU7QUiLBXDjMXDjMUiLBSXlHFJyYIOLx8H1qiv1YjP1YjK3bt5nr72fa5yOdTh8PMwyDQG8v+ZkZCrOzxzrn93OrpwcjmTwMSafT3OnqIjc0RP769SP+/a+Hhrjpdh+exD86ynZHB7suF9tOJ1seD7tOJ79cLn65XPx0OtkuxrIuFzuXLjE5NsZB92BbG5s2G5s2G586Oynk83wZGGCrpYWtlha+DgxQyOfZ7Ozkh83Gjs2Gv72dVCqFFhYWeF5fz1urlXWrlfWGBt51d1PI5dhwu9lwuynkcnzs7uZzQwObVivfrFZWGxuJx+MoHAySqakhc/YsmYoKMmVlZEpKWHM42Mtm2ctmeX3xIm+qq1m3WHhvsbBhsfChpoZwKIRCwSBL5eUkJB5LGBIpiRW7/QCwarezUlLCC7OZNbOZlyYTr8rKCN27h+LxOKGqKh5IRCSiEk+Lxc8cDpaLkzy323kqsSyRkYhXVjI/P49SqRSe8+eZlrgr8ai2lr1sFsPhOIA+KUJStbUkJdIS186dwzCMv5sYHx7Gd/o0PokJs5nZujr8EkGJkMSsRKyujodmM/MSUZOJMa+XQ1d4ub2dkdJSRiRGJcYlfBKTEn6JmSLsvsSV1laS/19jIpGg78IFBsvLGZTwSgz/A5uQ8JlM9LW2sri4ePI/3PB6cTc303/mDNdOncJbWsrVykrcTU0MDw4e7Xyckskk0WiUQCBAIBAgEomcWPgHPg4MXTXSOhMAAAAASUVORK5CYII=")
    no-repeat !important;
	background-position:14px 2px!important;}

	#Speichern {min-width: 120px !important;} 
	#Speichern {
    -moz-appearance:none!important;
    background: gainsboro url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACiklEQVQ4ja3R20vTYRjA8Zcuu+iiiy77I/IiFKQiScHKNFeKeZod8NiBSlEbSipOyUOakRp0MguLbFtgWGFlBGqZlie2UtN5yk2dbvu9+237diEFYUZBD3zuHr488AjxP2eHjtg9pbj2VWPTNNBz+AZFmgo2/3Ug6CxbdpeQsreS51F1oGkETQPm7QVs+sdb2BBeycuIGoiogfAK0tZd7bl2fOOQIblpxKR1jDzRKsOm5PEhQ1JSSDGZYWUQVgYhxVxZN/DpYaJ+srsWVc5gdywQWeIlOBd26mBXwaqdOgjOg8BzKNtOEvpLoL85weJc6ENVraiqlVn7NEmVksBzEJS9KvA8hObYqa68Ub7mgvc3411SjuDxmH9yrFg4U+8gIAsCsiC5wsX42Dt6byY41gS6rsVJqfQh5a/cSh+l92YpvPWNFWc/UvbR05jImsDby7HS7epEcXViG23C/DSDEdPR30hh2Khl2KD1DRu1yuCjRL0QQojX5TFSsT9AsbUw8OA47sWvgB9QAScwD0wAZsAEdKJKA/13E9xCCCE6ig5Jaa1haUjP4KM8/H4nfqUbv6sNn7MV7/J9vEu3URcamftQhGf+EotmHd0NR94LIYRo12mkasll6kUWlvYq/GovvuUWfEt38C5cR52vQ52rwjOjZ7orB2Uqn4lXabypiKkXQgjRln3QrX5MZuhOHNZ3jfhdrXhtV/HOVaPOlKFOXcQzmY8cP4+1Mx33WAYDzfE8K4w+IYQQwnQ66outLZyOwmictmZ89lq8U0WokxfwjGfjGT2F/JyKYk7B2pGIrTeO57poT3u2ZqsQQojW1Ij0xxkHpDEzEmNWFMbMyD8yZBxYeZy5/9iPL34HitUiNwkg7hQAAAAASUVORK5CYII=") no-repeat !important;
    margin-left:10px !important;
	color:black;
    font-size:14.0px!important;
    height:24px!important;
    padding-left:25px!important;
	padding-bottom: 5px!important; 
    background-position:14px 1px!important;
    border-radius:12px!important;}	

	#Speichern:hover{
    -moz-appearance: none !important; 
    background: #ccffff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACiklEQVQ4ja3R20vTYRjA8Zcuu+iiiy77I/IiFKQiScHKNFeKeZod8NiBSlEbSipOyUOakRp0MguLbFtgWGFlBGqZlie2UtN5yk2dbvu9+237diEFYUZBD3zuHr488AjxP2eHjtg9pbj2VWPTNNBz+AZFmgo2/3Ug6CxbdpeQsreS51F1oGkETQPm7QVs+sdb2BBeycuIGoiogfAK0tZd7bl2fOOQIblpxKR1jDzRKsOm5PEhQ1JSSDGZYWUQVgYhxVxZN/DpYaJ+srsWVc5gdywQWeIlOBd26mBXwaqdOgjOg8BzKNtOEvpLoL85weJc6ENVraiqlVn7NEmVksBzEJS9KvA8hObYqa68Ub7mgvc3411SjuDxmH9yrFg4U+8gIAsCsiC5wsX42Dt6byY41gS6rsVJqfQh5a/cSh+l92YpvPWNFWc/UvbR05jImsDby7HS7epEcXViG23C/DSDEdPR30hh2Khl2KD1DRu1yuCjRL0QQojX5TFSsT9AsbUw8OA47sWvgB9QAScwD0wAZsAEdKJKA/13E9xCCCE6ig5Jaa1haUjP4KM8/H4nfqUbv6sNn7MV7/J9vEu3URcamftQhGf+EotmHd0NR94LIYRo12mkasll6kUWlvYq/GovvuUWfEt38C5cR52vQ52rwjOjZ7orB2Uqn4lXabypiKkXQgjRln3QrX5MZuhOHNZ3jfhdrXhtV/HOVaPOlKFOXcQzmY8cP4+1Mx33WAYDzfE8K4w+IYQQwnQ66outLZyOwmictmZ89lq8U0WokxfwjGfjGT2F/JyKYk7B2pGIrTeO57poT3u2ZqsQQojW1Ij0xxkHpDEzEmNWFMbMyD8yZBxYeZy5/9iPL34HitUiNwkg7hQAAAAASUVORK5CYII=")
    no-repeat !important;
	background-position:14px 1px!important;}

Alles anzeigen

Mfg.
Endor