Apply a background image to the input[type='submit'] along with text

<input name="submit" type="submit" value="Search" class="button search">

Is it feasible to incorporate a CSS gradient using background-image: and still display the text within the value attribute?

Whenever I introduce a background-image, it conceals the text.

I would greatly appreciate any assistance

UPDATE

Below are the calculated styles corresponding to the markup

    (styles go here)

RESOLVED

A padding dilemma was causing the text to be pushed down. It appears that in Chrome on macOS, padding can be added without impacting the height, thus pushing the text out of view.

Thank you for the assistance everyone

htmlformscss

Answer №1

CSS

input {
background-color: #D28888;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#690707), to(#D28888));
background: -moz-linear-gradient(top, #690707 0%, #D28888 100%);
    border:none; padding:6px 12px; color:#fff; cursor:pointer
}

Check out the demonstration here ​

Implementing background-image

input {
background-image: url(http://alanbooth.net/alap/images/gradient.bmp);
border:none;
padding:6px 12px;
color:#fff;
cursor:pointer
}
​

View the second demo here

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

Extracting specific text from HTML tags using Python's BeautifulSoup

I'm trying to extract specific tags from two different sections of text using the BeautifulSoup library in Python. Here's what I've attempted so far: g = soup.find_all("dtposted") for tag in g: print(tag) <dtposted>2020<trnamt& ...

pythonhtmlbeautifulsoup

Retrieving the chosen value when there is a change in the select tag

Building a shop and almost done, but struggling with allowing customers to change product quantities in the cart and update prices dynamically. I've created a select-tag with 10 options for choosing quantities. I'd like users to be able to click ...

javascriptjqueryhtmlselect

What is the best way to add a `<div>` before or after a specific `<p>` element based on the client's height?

I am facing an issue with inserting a div before a paragraph element based on the given clientHeight. Specifically, I need to locate the closest paragraph element from the specified clientHeight and then add a div before or after that particular element. ...

javascripthtmlvue.js

What is the method for linking an icon in an iconfont using a keyword?

For my project, I would like to incorporate icon fonts and customize the font file using FontForge. I understand that glyphs can be referenced by unicode in HTML or CSS, for example <i>&#xe030;</i> and &::before{content: "\e030";} ...

cssfont-facewebfontsicon-fonts

When flex items are stacked in a column, the bottom portion may be truncated

(Edit) Check out the codepen example here. I am working on creating a stack of cards using Vue.js and flexbox to showcase different apps on my website. Each card is represented by a component and I utilize Vue's `for` function to display cards with t ...

htmlcssvue.jssass

React element featuring various interfaces

Currently, I am working on styling a React component in a way that allows for either horizontal or vertical styling without using flexbox. My question is, how can I pass styles down to the component in a way that applies individual styles to the child ele ...

cssreactjs

The scroll function triggers even upon the initial loading of the page

Trying to solve the challenge of creating a fullscreen slider similar to the one described in this question, I created a jsfiddle (currently on hold) Despite knowing that scrolling too fast causes bugs and that scrolling both ways has the same effect, m ...

javascriptjqueryhtmlcssevents

Adjust the style of cursor - User Interface Expansion Panel Material Design

Using the MiU component "Expansion panel", I encountered an issue. By default, when the user hovers over the panel, the cursor is set to pointer. I attempted to change it to a default cursor, but my modification did not work. The code for my component is ...

cssreactjsmaterial-ui

How can I enable the "edit" function for a button within a list item?

I am currently working on a feature that allows users to edit list rows by clicking a button. However, I am facing an issue where the "edit" button only edits the first row instead of the matched line. This functionality is part of a program I am developi ...

javascripthtml

Recreating dropdown menus using jQuery Clone

Hey there, I'm facing a situation with a dropdown list. When I choose "cat1" option, it should display sub cat 1 options. However, if I add another category, it should only show cat1 options without the sub cat options. The issue is that both cat 1 a ...

javascriptjqueryhtmlajax

All you need to know about the jQuery .css method

I've been struggling to get this script to function properly. Despite searching online, I haven't been able to find a satisfactory solution. $( document ).ready(function() { $("#container").click(function(){ var color = $(this).css("backgro ...

jquerycss

ClickEvent (or element selector) is experiencing functionality issues

I'm currently working on creating a small calculator using HTML, CSS, and JS. However, I'm facing an issue with selecting buttons of the calculator from the HTML script and adding EventListeners to them. Here is a snippet of my HTML code: `< ...

javascripthtmlcssevents

Setting the width of colspan elements can be challenging when other columns have dynamic widths

I am working with a table setup that includes various columns for data tracking: <table > <thead style="width: calc(100% - 15px); display: table; table-layout: fixed;"> <tr> <th colspan="3">& ...

csshtml

What could be the reason behind the disappearance of text from the previously highlighted button in my calculator's "button grid" when I change the highlighted button?

Currently, I am in the midst of creating a tip calculator with a grid consisting of various percentage buttons. My main objective is to change the font and background color when any tip button is selected. Nevertheless, an issue has surfaced - whenever I h ...

javascripthtmlcsscss-grid

jQuery for Implementing Pagination Across Multiple Tables

As a novice in the world of JavaScript and jQuery, I am struggling with implementing pagination for multiple tables on a single page. My goal is to have several tables that can be paginated using one navigation system. However, all my attempts so far have ...

javascriptjqueryhtml

unique map customized in a separate browser window

Attempting to complete the code provided here but encountering issues as a novice in java-scripting. It seems like the map is not loading correctly. A new tab and text are generated when DIV is created. Seeking assistance on how to open a custom map in a ...

javascripthtmlgoogle-maps

Where should I place my custom menu script in Wordpress and how do I do it?

I am currently exploring the realms of PHP, Wordpress, and Javascript as I endeavor to transform my website, crafted with CSS and HTML, into a dynamic theme for Wordpress using PHP. One particular feature on my site is an off-screen menu that smoothly ope ...

javascriptphphtmlcsswordpress

Uncertainty surrounding the extent of a button's scope within an Angular application

(click) event in one instance of a component is causing the function in another instance to be triggered unexpectedly. I am having trouble describing this issue. For reference, I have included a working example on stackblitz. When clicking on both buttons ...

htmlangularangularjsangular-directiveangular-components

Improving the method for adding an element to an HTML document with jQuery

What is the best way to add this element to a specific DIV Class using JQUERY in an optimized manner? The elements are generated dynamically and I want to use .AppendTo to display them inside <div class='parent-list-workorder'>. This is wh ...

javascriptjqueryhtmlcssajax

Using JQuery to enable checkbox if another is selected

I have a single checkbox that reveals a hidden div when checked. Inside this div, there are two additional checkboxes. My goal is to disable the initial checkbox if either of these two checkboxes is checked. Here's the HTML code snippet: <p> ...

javascriptjqueryhtmlcheckbox