Question

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

Is it possible to apply a CSS gradient using background-image: and still show the text contained in the value attribute?

When I add a background-image it hides the text.

Any help much appreciated

EDIT

Here are the computed styles to match the markup

    -webkit-appearance: none;
    -webkit-background-clip: border-box;
    -webkit-background-origin: padding-box;
    -webkit-background-size: auto;
    -webkit-border-image: none;
    -webkit-box-align: center;
    -webkit-box-shadow: rgba(255, 255, 255, 0.701961) 0px 0px 6px 0px inset, rgba(0, 0, 0, 0.0980392) 0px 2px 3px 0px;
    -webkit-font-smoothing: antialiased;
    -webkit-rtl-ordering: logical;
    -webkit-transition-delay: 0s;
    -webkit-transition-duration: 0.30000001192092896s;
    -webkit-transition-property: all;
    -webkit-transition-timing-function: linear;
    -webkit-user-select: text;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: -webkit-linear-gradient(top, #FF8F25 0%, #FF6D00 100%);
    background-origin: padding-box;
    background-position: 0% 0%;
    background-size: auto;
    border-bottom-color: #BE4B00;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color: #BE4B00;
    border-left-style: solid;
    border-left-width: 1px;
    border-right-color: #BE4B00;
    border-right-style: solid;
    border-right-width: 1px;
    border-top-color: #BE4B00;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-top-style: solid;
    border-top-width: 1px;
    bottom: 10px;
    box-shadow: rgba(255, 255, 255, 0.701961) 0px 0px 6px 0px inset, rgba(0, 0, 0, 0.0980392) 0px 2px 3px 0px;
    box-sizing: border-box;
    color: white;
    cursor: pointer;
    display: block;
    float: right;
    font-family: 'Lucida Grande';
    font-size: 12px;
    font-style: normal;
    font-variant: normal;
    font-weight: 800;
    height: 26px;
    letter-spacing: normal;
    line-height: 26px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    max-height: 24px;
    outline-color: white;
    outline-style: none;
    outline-width: 0px;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 24px;
    position: absolute;
    right: 8px;
    text-align: center;
    text-indent: 0px;
    text-shadow: none;
    text-transform: uppercase;
    vertical-align: baseline;
    white-space: pre;
    width: 85px;
    word-spacing: 0px

SOLVED

Was a padding issue pushing the text down. Seems like in Chrome on the Mac padding can be applied without affecting the height so that the text is pushed down out of view.

Thanks for the help guys

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
}

DEMO
​

---

By using background-image

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

DEMO – 2