Vanishing Submit Button with CSS

In my input submit button, I have included the following code:

<input class="buttons" type="button" onclick="javascript:jQuery(xxxx)" style="font-size: 12px;" value="Invite to Bid">

Additionally, there is a CSS function that adds an elegant "Go" image over the button:

.buttons {
background: url("/images/default/product/go_bt.png") no-repeat scroll 0 0 transparent;
}

Currently, both the image and button graphics are displayed. To hide the value of the button, I've used this CSS code:

input.buttons {
color: transparent;
}

However, despite hiding the value, the input button graphics remain visible. Is there a way to completely remove the input button graphics using the "buttons" class in CSS, so that only the functionality with the "go" image is present?

htmlcss

Answer №1

Hey there! If you're looking to either hide the input or remove the image, here are some tips:

If you want to use CSS to get rid of a background image, simply add the following line:

background-image:none

To make something completely disappear from view, you can try one of these options:

display: none  or visibility:hidden

It seems like in your example below, you were affecting the font color with this code:

color: transparent;

Just a reminder - CSS doesn't have functions, only IDs and classes. Also, this question may not need the css3 tag.

Answer №2

Based on my understanding, in order to accomplish this task, you need to specify the text-indent. Here is an example of how you can write it:

 input.buttons {
  text-indent:-9999px
}

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

Issues with Angular's *ngIf directive not functioning correctly

Within my template, I have a block of HTML that controls the visibility of a div. <div *ngIf="csvVisible"> <p>Paragraph works</p> </div> This particular code snippet belongs to my component. export class SettingsComponent imple ...

htmlangular

quickest method for accessing the selected radio button using jQuery

I'm trying to use jQuery to retrieve the selected radio button and display the text associated with that radio button. <div id="Poll"> <div id="PollQuestion">Your favorite color?</div> <ul> <li class="liAnsw ...

jqueryhtml

The inability to display a Stylesheet is due to the unsupported MIME type, even though the MIME type seems to be missing when checking for errors

Every time I try to apply a specific style to a particular page on a website (even though the same style functions properly on other parts of the web server), an error message pops up. The error notification states Refused to apply style from 'styl ...

htmlcssmime-types

Using HTML and JavaScript to create a link that appears as a URL but actually directs to a JavaScript function

I am working on an HTML page and I am trying to create a link that appears to go to 'example.html' but actually goes to 'javascript:ajaxLoad(example.html);'. Here is what I have tried: <a href="example" onclick="javascipt:ajaxLoad( ...

javascripthtmlhttp-redirecthyperlink

custom checkbox is not being marked as checked

I've been attempting to customize my checkboxes, following various tutorials without success. Despite trying multiple methods, I still can't get the checkboxes to check or uncheck. Here is the code I have so far: https://jsfiddle.net/NecroSyri/ ...

javascripthtmlcss

Having four videos displayed on one webpage can cause the browser to function at a slower

I have videos that are around 30 seconds long and 15mbs. I'm wondering if it's feasible to include them on a page or if I should opt for cover images instead. I would like to use the video as a separator similar to the design showcased at Does a ...

javascripthtmlcss

Is it feasible to utilize the HTML5 video tag in conjunction with a JSON callback?

Curious about the possibility of a video page layout featuring a main screen and smaller clickable screens below it. When clicking on one of the smaller screens, the main screen would display the selected video, similar to YouTube. We have obtained data f ...

javascriptjqueryjsonhtmlhtml5-video

Crafting a template for mixing up images and quotes without any specific connection - here's how!

I came across some interesting templates that can generate random quotes and others that create random pictures. My goal is to develop a template that generates both a random quote and a random picture, similar to this example, without any relation betwee ...

javascriptandroidcsstemplatesrandom

Struggling with flipping div functionality in IE9 on flipping content demo

I recently developed a flipping div using transitions and 3D transforms based on the Flipping Content Demo 1 from . While this works smoothly on most browsers, unfortunately IE 9 does not support transitions and 3D transforms. In order to address this iss ...

javascripthtmlanimationcss-transitions

Create a JavaScript array by extracting IDs from an HTML document

Looking to create a function that randomly selects an image defined in HTML code. I've opted to create an array to store all used images and have the function pick from there. Is there a simpler way to define the array or should I skip using it altog ...

javascripthtmlarrays

Insert title into PDF document

I am currently working on a react application that generates PDF documents easily. The libraries I have utilized are: jspdf html2canvas Below is the code snippet that demonstrates my approach: index.js: <div className="App"> < ...

javascripthtmlreactjspdfjspdf

transforming JSON information into tables on a webpage

Can someone help me with the challenge of incorporating a massive JSON file into an HTML table? I am encountering an issue where I continuously receive the error message Uncaught TypeError: v.forEach is not a function. Any guidance would be greatly appreci ...

javascriptjqueryhtmljsonforeach

The list in the navbar is misaligned and not centered vertically within the flex container

I've been working with flex for a while now, but I'm struggling to vertically align the content of my navbar to the center in the code. <nav className="nav navbar"> <h3> Logo </h3> <ul className= &q ...

htmlcssreactjs

Switch the text style when hovering, then switch it back upon second hovering

Searching for a method to modify the font of individual letters when hovering over them. The goal is for the letters to revert back to their original font after a second hover (not on the first hover-off). Any assistance would be greatly valued! ...

javascriptcssfontsmouseover

Shopify revamping the design of the collections

Looking to enhance the layout of a collection page by moving from a single column to having at least three items per row. The current layout can be viewed here Proposed new layout example shown here 1: Below is a snippet of the code I believe needs adj ...

htmlcssshopify

Using jQuery to select and animate several elements simultaneously without repeating the animation

Issue Summary (Fiddle): I'm trying to make all elements fade out simultaneously when clicked, but the current code causes the target to trigger three times resulting in three alert() calls. I want them to fade together without using a wrapper element ...

javascriptjqueryhtmlcss

Where could one possibly find the destination of the mysterious <circle>?

I want to implement a simple pulsating animation on a circle svg element. I attempted using a transform: scale(..,..) animation, but it seems to be shifting the entire circle within its container instead of just scaling the element itself. This is the cur ...

csssvgcss-animations

How can I choose specific options by clicking based on the select name's value with web scraping?

I'm attempting to scrape the select dropdown menu below in order to retrieve its text content. Unfortunately, I can't rely on the name attribute as "P889O1" varies for each product from which I need to extract data. I considered using 'cont ...

pythonhtmlseleniumbeautifulsoupurllib2

Error message: The desired element is not found in the cache when selecting a radio button with mechanize::phantomjs

Currently, I am working on automating a webpage that contains numerous JavaScript functions using Perl. I have been successful in utilizing the headless mechanize::phantomjs toolkit thus far. However, I have encountered what seems to be a minor issue that ...

htmlperlphantomjsmechanizebrowser-automation

Angular 2 component hierarchy with parent and child components

Currently, I am in the process of learning typescript and angular2. My attempt to incorporate parent and child components into my fiddle has not been successful. Despite conducting some research, I have encountered an error that states: Uncaught ReferenceE ...

htmlangulartypescript