A simple way to set a button as active when clicked in a form element

Is there a way to activate the input button with an Onclick event? 

<div class="paForm-right">
    <form onsubmit="" name="form1" id="form1" method="post">
        <input type="submit" class="paForm-choose" id="paForm-bottom-vk" value="Visitenkarten" name="submit" />
        <input type="submit" class="paForm-choose" id="paForm-bottom-briefbogen" value="Briefbogen" name="submit" />
        <input type="submit" class="paForm-choose" id="paForm-bottom-flyer" value="Flyer" name="submit" />
        <input type="submit" class="paForm-choose" id="paForm-bottom-faltblaetter" value="Faltblätter" name="submit" />
        <input type="submit" class="paForm-choose" id="paForm-bottom-einzelblaetter" value="Einzelblätter" name="submit" />
        <input type="submit" class="paForm-choose" id="paForm-bottom-plakate" value="Plakate" name="submit" />
        <input type="submit" class="paForm-choose" id="paForm-bottom-postkarten" value="Postkarten" name="submit" />
        <input type="submit" class="paForm-choose" id="paForm-bottom-prospekte" value="Prospekte" name="submit" />
        <input type="submit" class="paForm-choose" id="paForm-bottom-kataloge" value="Broschüren usw." name="submit" />
        <input type="submit" class="paForm-choose" id="paForm-bottom-mappe" value="Mappe" name="submit" />
        <input type="submit" class="paForm-choose" id="paForm-bottom-buch" value="Bücher" name="submit" />
        <input type="submit" class="paForm-choose" id="paForm-bottom-calender" value="Kalender" name="submit" />
        <input type="hidden" name="value[Produkt]" id="senden" value="Detailanfrage" />
    </form>
    <br />
</div>

I'm trying to apply some CSS styles, but I'm having trouble getting the active background to work...

    input.paForm-choose:hover 
background-color:#D10C2D;


#paForm-bottom-vk 
background-image:url(../Icon_Visitenkarte_HG-Trans.png);

#paForm-bottom-vk:hover 
background-image:url(../Icon_Visitenkarte_HG-Trans.png);


#paForm-bottom-vk:active 
background-image:url(../Icon_Visitenkarte_HG-active.png);
javascriptcssforms

Answer №1

Check out this interactive demonstration I created using your code. I made a small tweak by adding a "#" in front of the line with the :active property.

The :active effect is triggered only when you press and hold a key, not when you release it. This means Mickey Mouse will appear when the key is pressed down.

If you want the change to persist until another key is pressed, you'll need to modify the JavaScript code accordingly.

CSS

#paForm-bottom-vk:active {
background-image:url('http://i.imgur.com/1Xm81k2.jpg');
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

exploring the depths of nested objects and utilizing the 'for in

My issue involves receiving a json response from an API that includes objects within objects. It looks something like this: {Object}->{results}->{manyObjects} When I execute the following code: var list = data.results.list; for(val in list){ ...

javascriptjsonobject

Serve static files outside the root directory with Grunt Connect

I'm facing issues configuring my grunt file to include references (css & js) in my index.html Below is my project structure: src/ demo/ index.html app.js bower_components/ angular/ angular.js index.html: <script src="./bower_compo ...

javascriptgruntjs

Can someone please explain how to prevent Prettier from automatically inserting a new line at the end of my JavaScript file in VS Code?

After installing Prettier and configuring it to format on save, I encountered an issue while running Firebase deploy: 172:6 error Newline not allowed at end of file eol-last I noticed that Prettier is adding a new line at the end when formatting ...

javascripttypescriptfirebasevisual-studio-codeprettier

What is the best way to use a JavaScript function as a callback?

I'm struggling with understanding callbacks, especially how they function. Here is my function: function checkDuplicateIndex(values, callback) { $.ajax({ type: "POST", url: url, data: "command=checkIndexAlbumTracks& ...

javascriptjqueryajax

"Clicking on the jQuery carousel dots results in always navigating back to the first item

Creating a carousel using basic jquery, utilizing the .css() rule to toggle opacity between slides. The goal is to have each dot trigger the display of its corresponding slide while hiding the others. Currently trying: $('.dot').click(function( ...

javascriptjquery

Drop-down menu in a table cell overflowing with lengthy text, causing the table to collapse

I'm facing an issue with my table where I have inputs and selects inside <td>. The problem arises when the text in the options of the <select> element is too long, causing the <td> to expand and disrupt the overall layout of the tabl ...

htmlangularjscsssass

Collect data entered into the input box and store them in an array for the purpose of

I need assistance with a code that involves input boxes for users to enter numerical values, which are then stored in an array. My goal is to add these values together and display the sum using an alert when a button is clicked. However, I am struggling to ...

javascriptjqueryarraysparsinginput

I am facing an issue with my if statement not functioning properly when verifying a radio input

Trying to validate radio input to confirm if it's the correct answer, but encountering an issue where it skips the line if (answer == allQuestions[q].correctAnswer). Here is the complete code: https://jsfiddle.net/alcatel/sopfmevh/1/ for (let k = 0; ...

javascriptfor-loopif-statementradio-button

Determining if the device is connected to the internet

Is there a way to create a unique code using HTML, JavaScript, or jQuery that executes a random action when the website detects that the device is offline? ...

javascriptjqueryhtmlajax

Tips for navigating through an array of images

I am attempting to create a feature similar to Snapchat stories, where an array of images is displayed for a set amount of time before returning to the previous screen. Here is an example code snippet: if (images.length > 0) { let timeout; ...

javascriptreactjsreact-native

Passing a service into a directive results in an undefined value

Can someone help me understand why a service I am injecting into a directive is returning undefined in certain instances? If you would like to take a look at the code, here is a plunker link: https://plnkr.co/edit/H2x2z8ZW083NndFhiBvF?p=preview var app = ...

javascriptangularjs

What is the best way to display PHP files as the main landing page on my Express server?

I am currently using php for my home page, but I have come to realize that Node.js does not support .php files. So, I'm looking for a solution on how to address this issue. Below is the code I am using: var app = require('express')(); var h ...

javascriptphpnode.jsexpressindexing

Obtain document via Angular 2

Is it possible to use TypeScript to download an image that is already loaded? <div *ngIf="DisplayAttachmentImage" class="fixed-window-wrapper_dark"> <button class="btn btn-close-window" (wslClick)="HideAttachmentImage()"> & ...

javascripthtmlangulartypescriptdownload

What is the proper way to utilize document.getElementById() within a standalone js file?

As I dive into learning web development for the first time, I've decided to keep my scripts organized in separate files. However, I'm facing a challenge when trying to access elements from these external files. Below is a snippet of the JavaScri ...

javascripthtmlwebgetelementbyid

The CSS styles are not being applied to the PHP code

I seem to have a tangled mess of CSS / PHP / HTML to deal with. The issue I'm facing is that something works on one PHP script but not the other. Here's a snippet of my code: <?php if ($daten->getData_DB_User($get_page_num) != fa ...

phphtmlcss

Utilize AngularJS to retrieve and interact with the JSON data stored in a local file once it has

Please do not mark this as a duplicate since I have not found a solution yet. Any help would be appreciated. I have a file called category.json located next to my index.html file, containing the following JSON data: [{"name":"veg"},{"name","non-veg"}] W ...

javascriptangularjsjson

Revamp the switch-case statement in JavaScript code

Is there a way to refactor this code in order to prevent repeating dailogObj.image? I would have used a return statement if it wasn't for case 5 where two assignments are required. getDialogData(imageNum): any { const dailogObj = { image: ...

javascripttypescriptswitch-statement

Div with a vertical line

Check out this jsFiddle link Struggling to get a "vertical rule" to span the entire width of its container in a div, specifically adjusting the border-right of a nested div. Margins have been modified, even tried margin-top: 20px; in the #vr, but no luck. ...

csshtmlalignment

:last-child is effective, but :first-child is inefficient

I'm having trouble using CSS to hide the first .sku element within an aside that contains two of these elements. Strangely, the :last-child selector works just fine. Can anyone explain why this might be happening? Here's a link to the JSFiddle fo ...

csshtmlcss-selectors

Merging two arrays with lodash for a seamless union

Here are two arrays I'm working with: arr1 = [ { "key1": "Value1" }, { "key2": "Value2" }, { "key3": "Test3" }, { ...

javascriptarraysnode.jslodash