I have a submit button and the text shall in two lines. This is working in Firefox&Chrome, but not in IE:
HTML:
<input type="submit" value="This is a very long
two line Text" class="submit_button" >
CSS:
.submit_button {
width:200px;
height:100px;
}
http://jsfiddle.net/g6AKG/1/
Any ideas for IE (I tried IE11)?
you can also use
http://jsfiddle.net/g6AKG/2/
.submit_button
{
white-space: normal;
}
Use a button instead.
<button type="submit" class="submit_button">
This is a very long<br>
two line Text
</button>
<button type="submit" class="submit_button">
This is a very long<br>
two line Text
</button>
Edit: Looks like user Telic and I submitted the same answer seconds apart.
Related
I've got a file submit form and I want to change how the buttons look. Previously, I've done it this way, by wrapping the form inputs into divs and then using CSS to make the divs look a certain way.
However, It doesn't seem to work for the file submit button #myFile. It just places the button inside of the div. Whereas the submit button looks how I want it to look. Anyway to fix this? I would like the Choose File button to look like the submit button. Just text, no gray oval.
<form id="dataform" action="submit" method="post" enctype="multipart/form-data">
<div id="btn_upload_data">
<input type="file" name="myfile" id="myFile"/>
</div>
<div id="btn_sub_data">
<input type="submit" id="data_submit" value="Submit File"/>
</div>
</form>
Some CSS:
div#btn_upload_data input {
cursor:pointer;
padding-top:40px;
padding-bottom:60px;
width:130px;
height:0px;
background-color:#a6e79b;
border: none;
text-align:center;
display:inline-block;
float:left;
white-space: pre-wrap;
}
Try using
#btn_upload_data input[type="file"] {
opacity: 0;
filter: aplha(opacity=0);
}
And then place a text inside the div as Choose File.
<div id="btn_upload_data" title="No File Chosen"> // if title needed
<input type="file" name="myfile" id="myFile"/>
Choose File...
</div>
There is no alternate way of editing it. It is a pre-defined input type file's style. That is set by the OS itself. So you cannot edit that! You need to override it completely.
So, I was messing with CSS for my buttons and tried to test the following CSS code on the button element:
button {
width:85px;
height:29px;
background-color:#800080;
color:#FFFFFF;
font-size:14px;
font-weight:bold;
}
The 2 buttons at the end are created by this HTML:
<div id="header">
<div id="logo"><img src="logo.jpg" /></div>
<div id="search">
<form id="search-form">
<input type="text" style="width:80%;height:28px;background-color:#F5F5F5;font-size:16px;position:relative;top:-3px;"/>
<button type="button" style="position:relative;top:6px;"><img src="mgt.jpg" /></button>
</form>
</div>
<div id="upload" class="top-button"><button>Upload</button></div>
<div id="signin" class="top-button"><button>Sign in</button></div>
</div>
Last 2 buttons "upload" and "signin" are the ones n question.
and the result:
As viewed in Firefox. Any ideas what is causing this?
I don't see the issue .... Check out http://jsfiddle.net/vb7S3/
But I would still recommend not to use <button> tags and rather define style classes for #upload and #signin.
HTML
<button id="upload" class="top-button">Upload</button>
<button id="signin" class="top-button">Sign in</button>
CSS
#upload, #signin {
width:85px;
height:29px;
background-color:#800080;
color:#FFFFFF;
font-size:14px;
font-weight:bold;
}
Also <button> is tag may not be supported by all browsers.
Better Way...
HTML
<input id="button" class="upload-button" type="submit" value="Upload" />
<input id="button" class="sign-in-button" type="submit" value="Sign In" />
CSS
#button {
width:85px;
height:29px;
background-color:#800080;
color:#FFFFFF;
font-size:14px;
font-weight:bold;
}
Must include <input> tag inside the <form> ... </form> block.
see this demo on jsfiddle
you issue is id='upload' or id="signin"in
<div id="upload" class="top-button"><button>Upload</button></div>
there is some conflect between the CSS for upload and signin ids, possibly , some hieght value issue
It could be the height property that's causing this, since the purple area appears to be 29 px high. I'm not sure what the extra border below the text is, but it's possible that the border is being applied around the text instead of the entire button. Try adding border:none and see if that helps.
Ive been trying to style a submit button using an image. I would use CSS but the button is too complex design wise. I have tried adding a background image to a button but the image was badly positioned. I have also tried using
<input type="image" src="myimage.png">
But alas this is not a submit button so It doesn't work. I have looked and tried everything I believe possible but can't find a solution to making the button submit the form. Thanks.
if <input type="image"> doesn't work as expected just try instead
<button type="submit"><img src="myimage.png"></button>
but as I wrote in the comment above your code should work fine too
You have different possibilities for a submit button:
<input type="image">
<input type="submit">
<button></button> <!-- no type needed, since submit is the default type -->
These are all submit buttons. Pick the one, which suits you best.
Now you can choose to put an image between the button or use background-images and position them properly.
Example for button with background-image:
button {
background:url(data:image/gif;base64,R0lGODlhEgASAPYAAAAA/2NFB4tsE7KKCtCiDbWMCpFwDotwGdCgAe65FvjFKvjGLffDJNuqC5V1EaqJGPjHMPbKPvfOTLuRCo5yG+q3F/bEKG1SFdGjBvrcbeGuD2NFCY5wFfG+JPfNRpp1CLSOEfnJNPbOS/rPRsCSBmdJC8+mGvnLOv3ni/3nj/zkgPrUU9uqDWNCA9GoHfjSVfvie/rXW96tEmVHCreQFPnLP/fTXfrbdPzihf3qlP3mhsSYD5VzEPXEOffSWvrbcfzigP3rkqJ8DXFWFd2tFPrQSfnYYvvfdQAAAO7CNGVHDJh3DfLCK/nSUPraZ/zjfv3qkvzlhfvecqiCD2pNEL6TC/fGLvrSTfrbav3pjv3ojPzlgv3TT82kIWpOEZ55C+OyFfnMPvzdb/zda/3XWe/FOqiDEGpKAWZJDXNWEZt2B8KXDt6vHd+yIcifHKN+EXRTAmtQFmlMD2JCBWdIBmdIAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQF+gAAACwAAAAAEgASAAYH/4AAgoN1dHNzcnGDi4Rwb25tbGtqaWiMgmdmZWRjYmNkYWBfXoxnXVxiW1pZWltYV1ZVVIRTXFJRWVC6WU9OTUxLSoJwSWO4SEi6yEdGRURDAHRCV0+5yFBByEA/Pj08SnQ7ZDrWSDlQyDg3NjU0M3MyMTrK5lnIMFgvNS4tLSwrKqCcS4FiC5AnUoxcOWGiRQkSI6ToQKFjy5OLR7DEEBECxBwvH6zEQALjIgwYGUd66MBhA4A0Gkb4QJIhgxQsTkaKOIHhgiAlXyyIaIKsKBIPNSpQmDPIy4QOYUSIkCDCQwQIFR7MYCTHQQMGC6woYJAAwYGtl2ZcMFCAAIEBAg0utLi0aMOGfgHmMgoEACH5BAkFAAAALAYABQAGAAMABgcMgFCCg1BBhodBgoaBACH5BAkKAAAALAYABQAGAAMABgcOgEhIUFCCgkFBhoOFSIEAIfkEAQUAAAAsBgAFAAYAAwAGBwyAUIKDUEGGh0GChoEAOw==) no-repeat 5px center;
padding:5px 5px 5px 27px;
}
<button type='submit'>Submit</button>
(Or as a fiddle)
Use a button element and style it with css. Don't omit the text, you form should be accessible without images or css.
<button type='submit'>Informative submit text</button>
button {
background-image:url('myimage.png');
}
In case someone needs a newer html5 good answer:
<button id='' name='' value='' ><img src='img.jpg' /></button>
<input type="image" src="myimage.png">
or
<input type="submit" style="background:url(myimage.png)">
I have a button with long text like "Click here to start playing". I want to control the width and display the text in multiple lines. Is it possible in html/css?
Yes, you can have it on multiple lines using the white-space css property :)
input[type="submit"] {
white-space: normal;
width: 100px;
}
<input type="submit" value="Some long text that won't fit." />
add this to your element
white-space: normal;
width: 100px;
Here are two options:
<button>multiline<br>button<br>text</button>
or
<input type="button" value="Carriage
return
separators" style="text-align:center;">
This CSS might work for <input type="button" ..:
white-space: normal
Yes it is, and you can also use it like this
<button>Click here to<br/> start playing</button>
if you want to make the break yourself.
one other way to improve and style the multi-line text is
<button>Click here to<br/>
<span style="color:red;">start playing</span>
</button>
You can break a text using an entity in between the value. See the entity in example below:
<input style="width:100px;" type="button" value="Click here
to
start playing">
I have a submit button which is simply marked up as this:
<input type='submit' name='foo' value='Continue ⇢' class='button' />
I would like to make the rightward dotted arrow a tad larger.
<input type='submit' name='foo' value='Continue <span class='makemeatadlarger'>⇢</span>' class='button' />
is obviously not working... Is there a simple way to do this (I am not interested in adding tons of outher divs/spans and preferable without having to use images)
UPDATE
Inspired by accepted answer below I came up with this:
html
<button type='submit' name='foo' value='Continue' class='button'>Continue</button>
css
.button:after {
content: ' ⇢';
font-size: 220%;
height: 26px;
margin-top: -19px;
float: right;
}
example
And heres a live example over at jsfiddle
I don't believe so because taking the span out takes it out of the button. The best way would be a button instead of an input like so: <button type="submit" name="foo" class="button">Continue <span class='makemeatadlarger'>⇢</span></button>
You must style the button text as a whole, not just a portion. To achieve your desired effect wouldn't it be much easier to create an image?