Back To Website Design Forum

Hide button value through CSS

  • kami
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Apr 03, 2007
  • Posts: 9
  • Status: Offline

Post June 13th, 2008, 6:38 am

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
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post June 13th, 2008, 6:38 am

  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post June 13th, 2008, 7:13 am

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. }
Strong with this one, the sudo is.
  • kami
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Apr 03, 2007
  • Posts: 9
  • Status: Offline

Post June 13th, 2008, 8:09 am

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

Post June 13th, 2008, 1:06 pm

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. }
  6. BUTTON:
  7. <input type="submit" value="Whatever" class="prettybutton"/>

I tested both of those, and either one should work.
-Patrick J. B. Simmons | @hobbramble
"If I could give you one piece of advice to remember for the rest of your life, it would be this: when Patrick tells you to do something, do the opposite." - Nolan Ladewski
  • kami
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Apr 03, 2007
  • Posts: 9
  • Status: Offline

Post June 13th, 2008, 5:34 pm

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
  • Joined: Jan 21, 2004
  • Posts: 351
  • Loc: Indiana, USA
  • Status: Offline

Post June 13th, 2008, 6:35 pm

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).
-Patrick J. B. Simmons | @hobbramble
"If I could give you one piece of advice to remember for the rest of your life, it would be this: when Patrick tells you to do something, do the opposite." - Nolan Ladewski
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post June 14th, 2008, 11:51 am

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" />
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Joined: Oct 02, 2007
  • Posts: 575
  • Loc: Phoenix, AZ
  • Status: Offline

Post June 18th, 2008, 3:19 pm

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;}
phoenix web design
  • fyedernoggersnodden
  • Born
  • Born
  • No Avatar
  • Joined: Jul 03, 2008
  • Posts: 2
  • Status: Offline

Post July 3rd, 2008, 8:20 am

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
  • Joined: Oct 02, 2007
  • Posts: 575
  • Loc: Phoenix, AZ
  • Status: Offline

Post July 3rd, 2008, 8:38 am

Seems to work fine for me in IE7...
phoenix web design
  • fyedernoggersnodden
  • Born
  • Born
  • No Avatar
  • Joined: Jul 03, 2008
  • Posts: 2
  • Status: Offline

Post July 3rd, 2008, 10:34 am

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
  • Joined: Oct 02, 2007
  • Posts: 575
  • Loc: Phoenix, AZ
  • Status: Offline

Post July 3rd, 2008, 11:17 am

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..
phoenix web design
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post July 3rd, 2008, 11:38 am

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:
Strong with this one, the sudo is.
  • ScienceOfSpock
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Jul 06, 2004
  • Posts: 1890
  • Loc: Las Vegas
  • Status: Offline

Post July 3rd, 2008, 11:58 am

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
  • Joined: Aug 08, 2008
  • Posts: 1
  • Loc: California
  • Status: Offline

Post August 8th, 2008, 12:08 pm

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.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post August 8th, 2008, 12:08 pm

1, 2

Post Information

  • Total Posts in this topic: 18 posts
  • Users browsing this forum: No registered users and 137 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.