[alexdavey]

Why would you want to do this? If you need to make the button bigger, you can use CSS (width, height properties)
NVM... I thought of a situation But you could always a div as a button and style it using CSS...

[TheEmpty]

Sole_Wolf, on 15 April 2012 - 03:31 PM, said:

This is probably something very easy that I am missing, but how do you add a return in an input box?

\n doesn't work and <br> definitely doesn't work.

http://jsfiddle.net/JmJ5e/1/

Thanks.

Why does it need to be an input? Why not make it an

a

? What a lot of applications are doing now, primarly because of UJS.

[Lemon]

Theoretically like this: http://jsfiddle.net/JmJ5e/2/

But in reality, don't do this. The buttons shown in most browsers are based on the UI elements of the host OS rather than a common standard and as a result what the users see and how much configurability they have varies massively. For example, in Safari I can only see the tips of the letters on the second line and the height of the button is not adjustable, so if you implement this any use on Safari will not be able to ever see the second line.

As noted above, buttons not the tool for this task. If you need it for a form, use a div or something similar and attach a listener to the click to submit the form.

[Quinn]

<button></button>

anyone?
http://jsfiddle.net/JmJ5e/3/

[Cocoa]

Lemon, on 15 April 2012 - 03:49 PM, said:

[...]

But in reality, don't do this. The buttons shown in most browsers are based on the UI elements of the host OS rather than a common standard and as a result what the users see and how much configurability they have varies massively.

[...]

This.

It's better to use an 'a' element because with browsers like IE6 which for some reason is still in use, it can cause major problems and it's also easier to style an 'a' element rather than an input button or the HTML5 button tag.

[Daniel15]

The

<button>

element is the correct way to do this with actual buttons. <button>s can contain content like images, which makes them more awesome. You do need to make sure you style them correctly (if using custom styles for them), see http://particletree....button-element/ for some good examples.

If you want IE 6 and 7 support, there's a well-known issue in these browsers where it posts the text of the button instead of the button's value attribute. And in IE 6, when you click a submit button, it posts the values of ALL buttons on the page, not just the clicked one (so you can't know which button the user clicked). There are fixes available, one of which I've created: https://github.com/D...5/IE-button-fix

[TheEmpty]

Daniel15, on 16 April 2012 - 05:52 PM, said:

The

<button>

element is the correct way to do this with actual buttons. <button>s can contain content like images, which makes them more awesome. You do need to make sure you style them correctly (if using custom styles for them), see http://particletree....button-element/ for some good examples.

In Chrome, the JSFiddle of the button with a break line only shows the first line.

[Quinn]

ThatRailsGuy, on 16 April 2012 - 05:53 PM, said:

In Chrome, the JSFiddle of the button with a break line only shows the first line.

What version of Chrome are you using?

[TheEmpty]

Mac, stable

[Quinn]

ThatRailsGuy, on 16 April 2012 - 06:54 PM, said:

Mac, stable

[img]http://i.imgur.com/P2NYw.png[/img]

Try opening it in an incognito window.

[arronhunt]

Doesn't work on mobile safari either

[_Sam]

There is a very easy way, just open up Illustrator, Photoshop or some other drawing tool. Draw the button add some text and save it as png/jpg whatever. Now every browser will be able to display your button correctly.

[callumacrae]

_Sam, on 17 April 2012 - 04:34 AM, said:

There is a very easy way, just open up Illustrator, Photoshop or some other drawing tool. Draw the button add some text and save it as png/jpg whatever. Now every browser will be able to display your button correctly.

-1, use CSS!!!

[_Sam]

Yeah the animation maybe, but I want to see how you design a button in CSS with text on multiple lines that looks the same in every browser.

[callumacrae]

_Sam, on 17 April 2012 - 07:07 AM, said:

Yeah the animation maybe, but I want to see how you design a button in CSS with text on multiple lines that looks the same in every browser.

...
<style>
.button {
    border: 1px black solid;
    color: black;
    background-color: white;
    font-size: 16pt;
}
</style>
...
<div class="button">Clicky<br>Clicky</div>
<script>
$('.button').click(function () {
    $(this).parent('form').submit();
});
</script>
...

Using jQuery because untested.