Hide button value through CSS

  • kami
  • Newbie
  • Newbie
  • kami
  • Posts: 9

Post 3+ Months Ago

Hi,

I have a form design in which I will end up using an image in background of a submit button, which has the text, in a funky style, for the button. However, I dont want to make the value blank to ensure maximum compatibility/accessibilty.

so, is it possible to hide the value of a submit button through CSS? I do have javascript solutions, but I would like to base it in CSS.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

I'm not sure if this will work, but try
Code: [ Select ]
input.your_button
{
    color: transparent;
}
  1. input.your_button
  2. {
  3.     color: transparent;
  4. }
  • kami
  • Newbie
  • Newbie
  • kami
  • Posts: 9

Post 3+ Months Ago

I hadnt considered approaching it like that, but unfortunately it does not work :/
  • Hob Bramble
  • Proficient
  • Proficient
  • User avatar
  • Posts: 351
  • Loc: Indiana, USA

Post 3+ Months Ago

Using an ID:
Code: [ Select ]
CSS:
#prettybutton {
color:transparent;
}
 
BUTTON:
<input type="submit" value="Whatever" id="prettybutton"/>
  1. CSS:
  2. #prettybutton {
  3. color:transparent;
  4. }
  5.  
  6. BUTTON:
  7. <input type="submit" value="Whatever" id="prettybutton"/>


Using a class:
Code: [ Select ]
CSS:
.prettybutton {
color:transparent;
}

BUTTON:
<input type="submit" value="Whatever" class="prettybutton"/>
  1. CSS:
  2. .prettybutton {
  3. color:transparent;
  4. }
  5. BUTTON:
  6. <input type="submit" value="Whatever" class="prettybutton"/>

I tested both of those, and either one should work.
  • kami
  • Newbie
  • Newbie
  • kami
  • Posts: 9

Post 3+ Months Ago

Thanks for the reply Hob,

The transparent color solution does not work for IE 6 or Opera 9.50 beta, does work for firefox 3 beta however - I dont have any other browsers here to test with, but its not a 100% solution.

Until I can dig up something better, I have decided to stick with blank value, if the client comes up with issues I will have to javascript it or something.

There doesnt seem to be an effective solution.

Thanks for you replies guys.
  • Hob Bramble
  • Proficient
  • Proficient
  • User avatar
  • Posts: 351
  • Loc: Indiana, USA

Post 3+ Months Ago

Ah - my bad. I didn't check in Opera or in IE 6. I just realized it doesn't work in IE 8 (beta) either.

As an aside, I don't think any CSS-based solution is going to work for IE 6. I could be wrong about that, of course, but I'm fairly certain.

EDIT: Looking around, I came across this: http://www.ampsoft.net/webdesign-l/image-button.html
It's sort of evading the problem, but it works with or without stylesheets, and it's mostly cross-browser compatible (I tried it in Opers 9.5, Internet Explorer 6, 7, and 8, Firefox 3, Safari for Windows 3, and Maxthon 2 without any problems).
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Is it image or do you just want to hide the button? If so, why not use something like this?
Code: [ Select ]
<input type="image" name="button1" value="button1" />
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

I may be reading this wrong, but it looks like you're just trying to hide the text on the button so all you see is the text built into the image itself?

If that's the case, the ol' negative indent trick might work for you:
Quote:
.button_image{text-indent:-9999px;}
  • fyedernoggersnodden
  • Born
  • Born
  • fyedernoggersnodden
  • Posts: 2

Post 3+ Months Ago

jameson5555 wrote:
If that's the case, the ol' negative indent trick might work for you:
Quote:
.button_image{text-indent:-9999px;}


Lovely hack -- but IE7 croaks on it.

SigmaX
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

Seems to work fine for me in IE7...
  • fyedernoggersnodden
  • Born
  • Born
  • fyedernoggersnodden
  • Posts: 2

Post 3+ Months Ago

jameson5555 wrote:
Seems to work fine for me in IE7...


I should of clarified that I was using a Button, not an Image. If I use text-indent, the whole button gets "indented" into oblivion, not just the text.

Siggy
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

Ah, you're right.. IE7 doesn't seem to like that one with buttons. I can't seem to get anything to make the value disappear either. Looks like you might have to resort to the JavaScript solution..
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

What about this ?

Code: [ Select ]
button
{
   background: url('...');
}
button span
{
   visibility: hidden;
}
  1. button
  2. {
  3.    background: url('...');
  4. }
  5. button span
  6. {
  7.    visibility: hidden;
  8. }


Code: [ Select ]
<button type="submit">
   <span>Submit</span>
</button>
  1. <button type="submit">
  2.    <span>Submit</span>
  3. </button>


I could have sworn there was something about not being able to use <button> the first time I saw this thread. :scratchhead:
  • ScienceOfSpock
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1892
  • Loc: Las Vegas

Post 3+ Months Ago

You can use opacity to hide the button and still make it functional:
Code: [ Select ]
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;
 
  1.     -moz-opacity:0 ;
  2.     filter:alpha(opacity: 0);
  3.     opacity: 0;
  4.  


I use it to style a file input button and it works fine in IE6+, Firefox2+, Opera 9.5 and Safari (For windows) and you can see a sample here:
http://www.sanityinnegation.com/test/
  • crowbar
  • Born
  • Born
  • User avatar
  • Posts: 1
  • Loc: California

Post 3+ Months Ago

Hey Kami,

I tried this and magically it worked in IE7 and IE6 and FF3. I hope it helps ...

ps: won't work if text transform is removed...

Code: [ Select ]
 
#name
{
    color: transparent;
    text-transform: capitalize;
}
 
  1.  
  2. #name
  3. {
  4.     color: transparent;
  5.     text-transform: capitalize;
  6. }
  7.  




kami wrote:
Hi,

I have a form design in which I will end up using an image in background of a submit button, which has the text, in a funky style, for the button. However, I dont want to make the value blank to ensure maximum compatibility/accessibilty.

so, is it possible to hide the value of a submit button through CSS? I do have javascript solutions, but I would like to base it in CSS.
  • ajarantes
  • Born
  • Born
  • ajarantes
  • Posts: 1

Post 3+ Months Ago

I found a solution to this problem that I believe works on Firefox and IE. The solution I applied to my problem was to fix the width and height of the button through CSS and make the size of the font for the value equal to 0.1. This made it invisible and my background visible.(see below)

the html:

Code: [ Select ]
<input type='submit' name='submit' value='submit' class='submit' />


the css:

Code: [ Select ]
.submit {
    background-image: url('images/submit.gif');
    width: 35px;
    height: 25px;
    font-size: 0.1px;
    }
  1. .submit {
  2.     background-image: url('images/submit.gif');
  3.     width: 35px;
  4.     height: 25px;
  5.     font-size: 0.1px;
  6.     }
  • kosh
  • Born
  • Born
  • kosh
  • Posts: 1

Post 3+ Months Ago

I had this same problem that the OP had. A site I was working on had a text label coded into the html that I could not change. I set the background image using css and set color:transparent and font-size:99999px. I guess it blew the text up so large that no part of it was in the visable area any more.

Worked for me in IE 6 and 7 and Firefox 3.0.4

Code: [ Select ]
font-size:0.1px

still gave me a 1px black stroke.
  • mindfuckx
  • Born
  • Born
  • mindfuckx
  • Posts: 1

Post 3+ Months Ago

crowbar wrote:
Hey Kami,

I tried this and magically it worked in IE7 and IE6 and FF3. I hope it helps ...

ps: won't work if text transform is removed...

Code: [ Select ]
 
#name
{
    color: transparent;
    text-transform: capitalize;
}
 
  1.  
  2. #name
  3. {
  4.     color: transparent;
  5.     text-transform: capitalize;
  6. }
  7.  



This works indeed ( for some unknown reason )
BUT only if you position your button "absolutly"

In other words:

Code: [ Select ]

#button{
  color: transparent;
  text-transform: capitalize;
  position:absolute;
}

  1. #button{
  2.   color: transparent;
  3.   text-transform: capitalize;
  4.   position:absolute;
  5. }


Just thought I would let you guys know ;)

Post Information

  • Total Posts in this topic: 18 posts
  • Users browsing this forum: No registered users and 38 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.