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.
Related
i have the following button:-
<button type="submit" disabled style="
position: absolute;
height: 40px;
border: none;
color: #fff;
background: #4d9b84 ;
padding: 0 22px;
cursor: pointer;
border-radius: 30px;
top: 5px;
right: 5px;
font-size: 13px;
font-weight: 500;">
Get My Estimate
</button>
currently the button is disabled, but the button text is not grey out, as follow:-
so can anyone how i can grey out a disabled button?
You should put your CSS styles into a stylesheet rather than directly onto the HTML . Once it's set as a CSS style rule you can then use the :disabled flag to set styles for when that attribute is true.
You can not use the :disabled flag on inline styles.
Inline styles (style='...')will overwrite almost every other CSS style but can only be applied to the element (in this case a <button>) at the instance the element is created. It is not "dynamic" or re-active to events that occur once the page is loaded.
Overall, inline styles are to be avoided!
button.standard {
/* position: absolute;*/
height: 40px;
border: none;
color: #fff;
background: #4d9b84 ;
padding: 0 22px;
cursor: pointer;
border-radius: 30px;
/* top: 5px;
right: 5px;*/
font-size: 13px;
font-weight: 500;
}
button.standard:disabled {
color: #666;
}
<button type="submit" disabled class="standard">Get My Disabled Estimate</button>
<BR><BR>
<button type="submit" class="standard">Get My Live Estimate</button>
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 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/
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
I want to make all buttons on my website follow a flat button class, input buttons or span buttons should be exactly the same.
I have applied the same class, removing border, adding padding, etc.. but, the buttons using the element appear slightly bigger than the ones using the form button.
Why is that? What other css property could I edit to make them look the same (aside from having a preset height for all of them?)
This is my button class:
.button{
padding: 10px;
display: inline;
border-radius: 2px;
font-family: "Arial";
border: 0;
margin: 0 10px;
background: red;
font-size: 15px;
line-height: 15px;
color: white;
width: auto;
height: auto;
box-sizing: content-box;
}
Here is the fiddle: http://jsfiddle.net/raphadko/f3293yeL/
Best solution would be to wrap the buttons inside the spans. That way, you'll total control of the button positioning. Do not use them as button inside a form!
span > .button {
padding: 10px;
display: inline;
border-radius: 2px;
font-family: "Arial";
border: 0;
margin: 0 10px;
background: red;
font-size: 15px;
line-height: 15px;
color: white;
width: auto;
height: auto;
box-sizing: content-box;
}
<form>
<span>
<input type="submit" class="button" value="Button1" />
</span>
<span>
<input type="submit" class="button" value="Button2" />
</span>
<span>
<input type="submit" class="button" value="Button3" />
</span>
</form>
Note: The spans can help you position the element easily but its not advisable to use it as button when a form is concerned.