I have a form button input styled as text,
I want that text to wrap according to the width of the DIV it is trapped in.
But it doesn't
See Fiddle Here
CSS:
.content {
width:125px;height:180px;float:left;color:black;background:white
}
.text{overflow:visible;margin:0;padding:0;border:0;color:blue;background:0 0;font:inherit;text-decoration:none;cursor:pointer;-moz-user-select:text;line-height:normal}
.text:focus,.text:hover{color:#333;text-decoration:underline}
.text::-moz-focus-inner{padding:0;border:0}
HTML:
<div class="content">
<form action="a.php" method="POST" target="_blank">
<input type="submit" class="text" value="Some Very Long Text Here Doens't Wrap">
</form>
</div>
Add word-break: break-word;white-space: normal; to your input tag. Like this
.text {
word-break: break-word;
white-space: normal;
overflow: visible;
margin: 0;
padding: 0;
border: 0;
color: blue;
background: 0 0;
font: inherit;
text-decoration: none;
cursor: pointer;
-moz-user-select: text;
line-height: normal
}
Working JSFiddle here https://jsfiddle.net/bw74vxwd/6/
Related
I have a submit Button, which I styled with a label. For some reason, a mini button for the unstyled Button remains left to the styled Button and both are clickable. The whole thing looks like this in the Browser.
How do I get rid of it? I dont want to just make it invisible, because then the styled button won't be centered correctly.
[type="file"], [type="submit"]{
height: 0;
overflow: hidden;
width: 0;
}
[type="file"] + label, [type="submit"] +label {
background: #f15d22;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: 'Rubik', sans-serif;
font-size: inherit;
font-weight: 500;
margin-bottom: 1rem;
outline: none;
padding: 1rem 50px;
position: relative;
transition: all 0.3s;
vertical-align: middle;
}
[type="submit"] +label {
background: #2286f1;
}
<div align="center">
<button type="submit" id="send" [disabled]="!uploadForm.valid"></button>
<label for="send">Upload & Create</label>
</div>
Just add display:none to your button.
<button type="submit" id="send" [disabled]="!uploadForm.valid" style="display: none;"></button>
Here a short solution with inline style but you can easily add this to a CSS class.
Ok so I got the following:
What I want to do is to make the button which says "Elegir archivos" to be orange like the button that says "Finalizar" and make the text the file-input produces grey like the text which says "Formatos aceptados".
Here's what I tried:
<tr>
<td class="upload-pic"><input class="file-submit" type="file" name="fileUpload" size="50" multiple="multiple"/></td>
</tr>
CSS:
.file-submit {
height: 35px !important;
width: 300px !important;
padding: 5px !important;
font-size: 15px !important;
margin-right: 10px !important;
margin-top: 10px !important;
margin-bottom: 20px !important;
background-color:red;
}
input[type="file"] {
width: 80%;
color: white;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
background-color: #FD8907;
margin-left: 10px;
float: right;
}
What I want: The button which says "Elegir archivos" has to be orange with its text in white. The text next to it which says "No se eligio archivo" has to be grey with the white background. For some reason everything ends up in a big orange box and the button still looks like the default one.
In order to achieve that, you can wrap the input button with "label", so that label becomes clickable. Then make your input button opacity 0 (transparent).
$('.file-submit').on('change', function(){
$(this).closest('.btn-wrapper').find('span')
.text('FOTOS Formatos aceptados: JPG');
})
.btn-wrapper {
font-family: 'Veranda', sans-serif;
}
.btn-file {
padding: 8px 15px;
background-color: #fd8907;
border-radius: 3px;
color: #fff;
margin-right: 8px;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}
.btn-file span {
display: block;
color: #777;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>
<div class="btn-wrapper">
<label class="btn-file">
Elegir archivos
<input type="file" class="file-submit" name="fileUpload" accept=".jpg" multiple="multiple">
</label>
<span>No se eligio archivo</span>
</div>
</td>
But if you want to change the text after file is selected, you will need some help with javascript or jQuery.
Basically what the problem is, that the browser doesn't know that you want it to be orange. Because your file says that it is a button, it is applying the default HTML button style to it. To clear this, in the CSS, all you have to say is:
tr td input.file-submit {
text-decoration: none;
color: #ffffff;
}
Then, just change the color of the text to #848D95.
There you go. Done.
Hope this helps!!!
I am creating a simple file-upload web. This is the code that i have:
<form action="" method="post" enctype="multipart/form-data">
<input type="file" id="upload-photo" name="files[]" multiple="multiple" accept="image/*"/>
<button type="submit" value="Upload!">Upload</button>
</form>
I've seen a lot questions pretty much like mine but I couldn't find a solution. Maybe I can't apply them to my code. Not sure how to use labels cause after I create one it appears as text and I am not able to style it like a button. Also a piece of space stays blank, after i change the opacity of the <input type="file" id="upload-photo" name="files[]" to 0.Any advice would be helpful.
Thanks in advance.
Check this snippet
What you need to do is to provide a label for the input field and style as it would be a button
#upload-photo {
height: 0;
width: 0;
}
#upload-photo-label {
border: 1px solid #cccccc;
padding: 5px 30px;
font-family:arial;
font-size: 13px;
}
#upload-photo-label:active{
background:#ccc;
}
<form action="" method="post" enctype="multipart/form-data">
<input type="file" id="upload-photo" name="files[]" multiple="multiple" accept="image/*"/>
<label id="upload-photo-label" for="upload-photo">Browse</label>
<button type="submit" value="Upload!">Upload</button>
</form>
you can do it like this
Html
<div class="box">
<input type="file" name="file-1[]" id="file-1" class="inputfile inputfile-1" data-multiple-caption="{count} files selected" multiple style="display: none;" />
<label for="file-1"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> <span>Choose a file…</span></label>
</div>
Css
.box {
background-color: #dfc8ca;
padding: 6.25rem 1.25rem;
}
.js .inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
button, input {
line-height: normal;
}
button, input, select, textarea {
font-family: inherit;
font-size: 100%;
margin: 0;
}
inputfile-1 + label {
color: #f1e5e6;
background-color: #d3394c;
}
.inputfile + label {
max-width: 80%;
font-size: 1.25rem;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
display: inline-block;
overflow: hidden;
padding: 0.625rem 1.25rem;
}
svg:not(:root) {
overflow: hidden;
}
.inputfile-1 + label {
color: #f1e5e6;
background-color: #d3394c;
}
.inputfile + label {
max-width: 80%;
font-size: 1.25rem;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
display: inline-block;
overflow: hidden;
padding: 0.625rem 1.25rem;
}
here demo link https://jsfiddle.net/7we705q1/5/
I am new to CSS and hope someone here can help me with this.
I am trying to apply a simple custom style to a file upload button (as part of an HTML form) to make it look similar to other buttons on my page and to get a similar look cross-browser.
So far I have the following which works as intended.
My only problem now is that I would like the button to take the full width of its parent div (in my case this will span across 9/12 ('col-9') of the page).
I tried adding width: 100%; to the CSS but then the button doesn't work anymore.
My HTML:
<div class="col-3 frmCaption">Attachments:</div>
<div class="col-9">
<div class="customUpload btnUpload btnM">
<span>Upload files</span>
<input type="file" class="upload" />
</div>
</div>
My CSS:
.btnDefault, .btnUpload {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
color: #333333;
cursor: pointer;
font-weight: 400;
display: inline-block;
padding: 6px 12px;
text-align: center;
text-decoration: none;
vertical-align: middle;
}
.btnDefault:focus, .btnDefault:hover, .btnUpload:focus, .btnUpload:hover {
background-color: #E6E6E6;
}
.btnM {
border-radius: 4px;
font-size: 14px;
padding: 6px 12px;
}
.customUpload {
overflow: hidden;
position: relative;
}
.customUpload input.upload {
cursor: pointer;
margin: 0;
opacity: 0;
filter: alpha(opacity=0);
padding: 0;
position: absolute;
right: 0;
top: 0;
}
To style input elements, you need to actually style its label element.
From MDN,
The HTML Label Element () represents a caption for an item in a user interface. It can be associated with a control either by placing the control element inside the element, or by using the for attribute. Such a control is called the labeled control of the label element.
So, whenever you click a label, the attached input gets triggered.
So, just wrap the input element in a label instead of a div and stretch as much as you want. That will fix your issue.
.btnDefault,
.btnUpload {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
color: #333333;
cursor: pointer;
font-weight: 400;
display: inline-block;
padding: 6px 12px;
text-align: center;
text-decoration: none;
vertical-align: middle;
}
.btnDefault:focus,
.btnDefault:hover,
.btnUpload:focus,
.btnUpload:hover {
background-color: #E6E6E6;
}
.btnM {
border-radius: 4px;
font-size: 14px;
padding: 6px 12px;
}
.customUpload {
overflow: hidden;
position: relative;
display: block;
}
.customUpload input.upload {
cursor: pointer;
margin: 0;
opacity: 0;
filter: alpha(opacity=0);
padding: 0;
position: absolute;
right: 0;
top: 0;
}
<div class="col-3 frmCaption">Attachments:</div>
<div class="col-9">
<label class="customUpload btnUpload btnM"> <span>Upload files</span>
<input type="file" class="upload" />
</label>
</div>
Working Fiddle
You need to apply the width property to the containing <div> as well. Once the div has the full size, then only the button inside can have the full width.
For simplicity i have made change to html, you can move it to appropriate classes.
<div class="col-3 frmCaption">Attachments:</div>
<div class="col-9">
<div class="customUpload btnUpload btnM" style="width:100%;">
<span>Upload files</span>
<input type="file" class="upload" style="width:100%;"/>
</div>
</div>
JS Fiddle
Or you can use this CSS andadd it both to your div and file upload,
.fullwidth
{
width : 100%;
}
<div class="col-3 frmCaption">Attachments:</div>
<div class="col-9">
<div class="customUpload btnUpload btnM fullwidth">
<span>Upload files</span>
<input type="file" class="upload fullwidth"/>
</div>
</div>
Make the button take 12 cols (as you use a 12 col system) , as that is the max number of cils available, in that way the elemts will take up the size of the div that it is contained in
The Situation
I have two pages with identical content and styling. The difference between them is that one lists items with <div> elements and the other with <input> elements (for showing and editing a resource, respectively).
I'd like both pages to have the same layout. I've achieved the layout I want on the standard <div> page and would like to duplicate it on the page with <input> elements. Both pages have the same CSS rules applied to them as well as Eric Mayer's Reset.
The Problem
Text is rendered differently in a <div> element than it is in an <input> element and results in an <input> that is too high.
What's Been Tried
I've tried setting the height of the input so that it is the same as the div, though that causes the text to become clipped at the bottom. I couldn't find a way to remove the white space at the top of the input.
I also did a diff of the computed styles for each element and they are almost identical (aside from a few styles that have no affect on the issue here).
The Question
Is there a way to make the input in the first picture match the height of the div in the second?
Additionally, is there a place where I can learn more about how/why browsers have this sort of behavior and what controls it? I've already read through W3C's CSS Fonts Module Level 3 with unsatisfactory results.
See current state (input, div):
.recipe .header {
margin-bottom: 50px;
text-align: left;
font-weight: 600;
color: #f0424b;
}
.form-recipe input {
font-family: "futura-pt";
}
.header {
margin-bottom: 40px;
font-size: 3em;
text-align: center;
}
// Reset
input {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-family: inherit;
font-size: 100%;
vertical-align: baseline;
}
// User agent stylesheet
input {
padding: 1px 0px;
-webkit-appearance: textfield;
padding: 1px;
background-color: white;
border: 2px inset;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
cursor: auto;
}
<div class="delicious">
<form name="recipe.edit" class="form form-recipe recipe">
<div class="form-group">
<div class="form-row">
<input type="text" class="header" value="Banana Bread"/>
</div>
</div>
</form>
</div>
.recipe .header {
margin-bottom: 50px;
text-align: left;
font-weight: 600;
color: #f0424b;
}
.header {
margin-bottom: 40px;
font-size: 3em;
text-align: center;
}
// Reset
div {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-family: inherit;
font-size: 100%;
vertical-align: baseline;
}
// User agent stylesheet
div {
display: block;
}
<div class="delicious">
<div class="recipe">
<div class="header">
Banana Bread
</div>
</div>
</div>
How about this? That works if you want them exactly identical. (The spaces between them are because of the other wrappers)
HTML
<div class="delicious">
<form name="recipe.edit" class="form form-recipe recipe">
<div class="form-group">
<div class="form-row">
<input type="text" class="header" value="Banana Bread"/>
</div>
</div>
</form>
</div>
<!------------------------------------------------------------>
<div class="delicious">
<div class="recipe">
<div class="header">
Banana Bread
</div>
</div>
</div>
CSS
.recipe .header {
margin-bottom: 50px;
text-align: left;
font-weight: 600;
color: #f0424b;
}
.form-recipe input {
font-family: "futura-pt";
}
.header {
margin-bottom: 40px;
font-size: 3em;
text-align: center;
width:100%;
border:none;
padding:0;
outline:0;
}
Though I personally wouldn't recommend this, because I believe the user needs to realize that it's now able to edit the contents, anyway, maybe set outline-color:#f0424b and focus the element on edit? outline does not affect the element's width/height but it does give some clue that you are in focus and able to edit.
Hope it helps!