Een afbeelding van een invoerknop wijzigen met CSS

Ik kan dus een invoerknop met een afbeelding maken met

<INPUT type="image" src="/images/Btn.PNG" value="">

Maar ik krijg hetzelfde gedrag niet met CSS. Ik heb bijvoorbeeld geprobeerd

<INPUT type="image" class="myButton" value="">

waar “myButton” is gedefinieerd in het CSS-bestand als

.myButton {
    background:url(/images/Btn.PNG) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}

Als dat alles is wat ik wilde doen, zou ik de originele stijl kunnen gebruiken, maar ik wil het uiterlijk van de knop bij het aanwijzen veranderen (met een myButton:hoverklasse). Ik weet dat de links goed zijn, omdat ik ze heb kunnen laden voor een achtergrondafbeelding voor andere delen van de pagina (even ter controle). Ik heb op internet voorbeelden gevonden van hoe je het kunt doen met JavaScript, maar ik ben op zoek naar een CSS-oplossing.

Ik gebruik Firefox 3.0.3 als dat een verschil maakt.

Antwoord 1, autoriteit 100%

Als je de knop wilt opmaken met CSS, maak er dan een type=”submit”-knop van in plaats van type=”image”. type=”image” verwacht een SRC, die je niet kunt instellen in CSS.

Houd er rekening mee dat u in Safari geen enkele knop kunt stylen op de manier die u zoekt. Als je Safari-ondersteuning nodig hebt, moet je een afbeelding plaatsen en een onclick-functie hebben die het formulier verzendt.

Antwoord 2, autoriteit 95%

U kunt de tag <button>gebruiken. Voor een inzending voegt u eenvoudig type="submit"toe. Gebruik vervolgens een achtergrondafbeelding als u wilt dat de knop als afbeelding wordt weergegeven.

Vind ik leuk:

<button type="submit" style="border: 0; background: transparent">
    <img src="/images/Btn.PNG" width="90" height="50" alt="submit" />
</button>

Meer info: http://htmldog.com/reference/htmltags/button/

Antwoord 3, autoriteit 62%

HTML

<div class="myButton"><INPUT type="submit" name="" value=""></div>

CSS

div.myButton input {
    background:url(/images/Btn.PNG) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}

Dit werkt overal, zelfs in Safari.

Antwoord 4, autoriteit 21%

Dit artikel over CSS-afbeeldingsvervanging voor verzendknoppenkan helpen.

“Als je deze methode gebruikt, krijg je een aanklikbare afbeelding als stylesheets actief zijn, en een standaardknop als stylesheets uit zijn. De truc is om de methode voor het vervangen van afbeeldingen toe te passen op een button-tag en deze te gebruiken als de verzendknop, in plaats van invoer te gebruiken.

En aangezien knopranden worden gewist, is het ook aan te raden de knopcursor te wijzigen in
de handvormige die wordt gebruikt voor links, omdat dit de gebruikers een visuele tip geeft.”

De CSS-code:

#replacement-1 {
  width: 100px;
  height: 55px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent url(image.gif) no-repeat center top;
  text-indent: -1000em;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}
#replacement-2 {
  width: 100px;
  height: 55px;
  padding: 55px 0 0;
  margin: 0;
  border: 0;
  background: transparent url(image.gif) no-repeat center top;
  overflow: hidden;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}
form>#replacement-2 { /* For non-IE browsers*/
  height: 0px;
}

Antwoord 5, autoriteit 11%

Hier is een eenvoudigere oplossing, maar zonder extra omringende div:

<input type="submit" value="Submit">

De CSS gebruikt een basistechniek voor het vervangen van afbeeldingen. Voor bonuspunten toont het met behulp van een afbeeldingssprite:

<style>
    input[type="submit"] {
        border: 0;
        background: url('sprite.png') no-repeat -40px left;
        text-indent: -9999em;
        line-height:3000;
        width: 50px;
        height: 20px;
    }
</style>

Bron:
http://work.arounds. org/issue/21/using-css-sprites-with-input-type-submit-buttons/

Antwoord 6, autoriteit 2%

Dit is wat voor mij werkte in Internet Explorer, een kleine aanpassing aan de oplossing door Philoye.

>#divbutton
{
    position:relative;
    top:-64px;
    left:210px;
    background: transparent url("../../images/login_go.png") no-repeat;
    line-height:3000;
    width:33px;
    height:32px;
    border:none;
    cursor:pointer;
}

Antwoord 7, autoriteit 2%

U kunt blank.gif(een transparante afbeelding van één pixel) gebruiken als doel in uw tag:

<input type="image" src="img/blank.gif" class="button">

En dan achtergrond stylen in CSS:

.button {border:0;background:transparent url("../img/button.png") no-repeat 0 0;}
.button:hover {background:transparent url("../img/button-hover.png") no-repeat 0 0;}

Antwoord 8, autoriteit 2%

Een variatie op de vorige antwoorden:

Ik heb ontdekt dat de dekking moet worden ingesteld, dit werkt natuurlijk in Internet Explorer 6 en verder. Er was een probleem met de regelhoogte-oplossing in Internet Explorer 8 waarbij de knop niet reageerde. En hiermee krijg je ook nog een handcursor!

<div id="myButton">
    <input id="myInputButton" type="submit" name="" value="">
</div>
#myButton {
    background: url("form_send_button.gif") no-repeat;
    width: 62px;
    height: 24px;
}
#myInputButton {
    background: url("form_send_button.gif") no-repeat;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    width: 67px;
    height: 26px;
    cursor: pointer;
    cursor: hand;
}

Antwoord 9, autoriteit 2%

Ik denk dat het volgende de beste oplossing is:

CSS:

.edit-button {
    background-image: url(edit.png);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
}

HTML:

<input class="edit-button" type="image" src="transparent.png" />

Antwoord 10

Mijn oplossing zonder JavaScript en zonder afbeeldingen is deze:

HTML:

<input type=Submit class=continue_shopping_2
       name=Register title="Confirm Your Data!"
       value="confirm your data">

CSS:

.continue_shopping_2: hover {
    background-color: #FF9933;
    text-decoration: none;
    color: #FFFFFF;
}
.continue_shopping_2 {
    padding: 0 0 3px 0;
    cursor: pointer;
    background-color: #EC5500;
    display: block;
    text-align: center;
    margin-top: 8px;
    width: 174px;
    height: 21px;
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
    border-color: #919191;
    font-family: Verdana;
    font-size: 13px;
    font-style: normal;
    line-height: normal;
    font-weight: bold;
    color: #FFFFFF;
}

Antwoord 11

Misschien kunt u ook gewoon een .js-bestand importeren en de afbeelding daar laten vervangen, in JavaScript.

Antwoord 12

Laten we aannemen dat je het invoertype niet kunt veranderen, of zelfs de src. Je hebt alleenCSS om mee te spelen.

Als je de gewenste hoogte weet en je hebt de URL van een achtergrondafbeelding die je in plaats daarvan wilt gebruiken, dan heb je geluk.

Stel de hoogte in op nul en de padding-top op de gewenste hoogte. Dat zal de originele afbeelding uit het zicht schuiven, waardoor je een perfect schone ruimte hebt om je CSS-achtergrondafbeelding te tonen.

Het werkt in Chrome. Ik heb geen idee of het werkt in Internet Explorer. Bijna niets slims doet dat, dus waarschijnlijk niet.

#daft {
  height: 0;
  padding-top: 100px;
  width: 100px;
  background-image: url(clever.jpg);
}

<input type="image" src="daft.jpg" id="daft">