I'm working on a drag and drop field for files and so far I have been able to style it however I wish. Except I need to somehow add text that says 'drag and drop' inside the area. I'm not really sure how to accomplish this.
I have tried adding content:'drag and drop';
And I have tried a background image, but it was not scalable and not something that I believe is the right solution.
my html looks like this
<input type="file" class="form-control" name="uploadCover" value="" />
and my css looks like this
input[type="file"]{
padding-bottom: 4em;
padding-top: 2em;
width: 100%;
border: 1px dashed #000;
}
input[type="file"]:hover{
border: 1px dashed #67a5c5;
}
and the field looks like this...ignore the ugly yellow!
Any help or ideas would be wonderful! I'm really trying to avoid javascript.
How about this for a starting point? It uses a :after pseudo element, so that the content you're adding follows the control itself.
It is "centre aligned" (using margin auto 50%) to avoid overlapping the filename text, but you'll probably need add some more CSS to make sure this doesn't happen on your web page.
input[type="file"]:after {
content: "Drag and drop";
display: block;
min-width: 20em;
margin: auto 50%;
}
http://jsfiddle.net/jrG7v/
Edit: as pointed out this only works in Chrome. No text is displayed in Firefox, and IE11 (seems I've been upgraded since I last used IE10) still displays the text-style input box. Hopefully somebody else has a better answer.
For compatibility with browsers, I'd go with:
<div>
<input type="file" class="form-control" name="uploadCover" value="" />
<div class="drag">Drag and Drop</div>
</div>
div.drag { min-width: 100px; margin-top: -25px; padding-left: 10px; font-family: arial; font-size: 12px;}
Fiddle:
http://jsfiddle.net/jrG7v/3/
Related
I have a MailChimp for WordPress plugin with form code as such
<p>
<label>Get new posts delivered to your inbox!</label>
<input type="email" id="my-input" name="EMAIL" align="right" placeholder="Your email address" required />
</p>
<p>
<input type="submit" value="Subscribe" />
</p>
It looks like this on the sidebar:
It seems everything is correctly right aligned within the sidebar except my input form. There is a right margin that I cannot get rid of.
I can put customer CSS like so, but it doesn't so anything.
#my-input {
text-align: right; /* This works */
margin-right: 0px; /* This doesn't work */
}
Any tips to edit either the HTML or the custom CSS to get this working?
You can try this code:
#my-input {
text-align: right;
margin-right: 0 !important;
display: block;
width: 100%;
}
paste this
#my-input {
margin-left: 320px !important;
width: 50%; }
you can check out here https://www.w3schools.com/code/tryit.asp?filename=FPP4AWLPX1NP
In my specific case, the solution was
#my-input {
width: 100%; /* Somehow width was not already 100% by default */
}
Maybe it was something in the Customizr Wordpress theme I was using that messed it up.
Thanks #BM RAFIQ for giving me code to try, if width 100% doesn't work for you try some of the other code he wrote.
if you want to use margin for input tag you have to specified width and using display:block. look at this question it may help you.
another way which I don't recommend is using !important. you can add margin-right:0px !important; in css.
I'm missing something obvious and simple but can't see it no matter how hard I squint or glare at the screen.
I'd like to use an image as the background or instead of the button. It's not displaying.
markup and css:
#switch {
background: url("../images/swap.png") no-repeat scroll 0 0 transparent;
color: #000000;
cursor: pointer;
font-weight: bold;
height: 20px;
padding-bottom: 2px;
width: 75px;
}
<div class="conversionFormE" id="switch1">
<label> </label>
<input type="button" id="switch" name="switch" value="SWITCH!" onclick="switchUnits()"/>
</div>
thanks for any help!
If the image is too big, it may be clipped to the point where you don't see it. Try adding:
background-size:75px;
to see if it appears. (Note that IE prior to 9 doesn't support background-size, so if you need support old IE, the easiest solution is to shrink the image file. Or use a filter to shrink it in IE).
I've seen this post already and tried everything I could to change the padding for my placeholder but alas, it seems it just doesn't want to cooperate.
Anyway, here is the code for the css. (EDIT: This is the generated css from sass)
#search {
margin-top: 1px;
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 220px;
}
#search form {
position: relative;
}
#search input {
padding: 0 10px 0 29px;
color: #555555;
border: none;
background: url('/images/bg_searchbar.png?1296191141') no-repeat;
width: 180px;
height: 29px;
overflow: hidden;
}
#search input:hover {
color: #00ccff;
background-position: 0px -32px;
}
And here's the simple html:
<div id="search">
<form>
<input type="text" value="" placeholder="Search..." name="q" autocomplete="off" class="">
</form>
<div id="jquery-live-search" style="display: block; position: absolute; top: 15px; width: 219px;">
<ul id="search-results" class="dropdown">
</ul>
</div>
</div>
Pretty simple? the placeholder is off for some reason but when you try to type in the input field, the text is the aligned. It seems that you can only change the color(for webkit) of the placeholder, but if I try to edit the padding of the containing input, it wrecks the design of the input! pulls out hair
Here are screenies of the placeholder and the input field with text input:
EDIT:
For now I have resorted to this jquery plugin.
It works right out of the box and it fixes my chrome's problem. I would still like to uncover what the problem is (if it has something to do with MY chrome or something)
I'm pretty sure it's not the styles since John Catterfeld reproduced it with no problems, so I'm hoping someone out there could still point me to the right direction as to why this is happening to me(my client's chrome as well. So this is probably native to Chrome/OSX if John is using windows)
I got the same issue.
I fixed it by removing line-height from my input. Check if there is some lineheight which is causing the problem
I had similar issue, my problem was with the side padding, and the solution was with, text-indent, I wasn't realize that text indent effect the placeholder side position.
input{
text-indent: 10px;
}
If you want to keep your line-height and force the placeholder to have the same, you can directly edit the placeholder CSS since the newer browser versions. That did the trick for me:
input::-webkit-input-placeholder { /* WebKit browsers */
line-height: 1.5em;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
line-height: 1.5em;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
line-height: 1.5em;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
line-height: 1.5em;
}
line-height: normal;
worked for me ;)
Angular Material
add in the placeholder if padding did not work - but not a recommended way
<input matInput type="text" placeholder=" Email">
Non Angular Material
Add padding to your input field, like below. Click Run Code Snippet to see demo
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container m-3 d-flex flex-column align-items-center justify-content-around" style="height:100px;">
<input type="text" class="pl-0" placeholder="Email with no Padding" style="width:240px;">
<input type="text" class="pl-3" placeholder="Email with 1 rem padding" style="width:240px;">
</div>
I had a problem, which appears just in internet explorer. Input field was styled
height:38px;
line-height:38px;
Unfortunately in IE the initial placeholder appears not at the correct position. But when I have clicked into the field and then left this field, the placeholder appeared on the right position.
My solution was to set:
line-height:normal;
Setting line-height: 0px; fixed it for me in Chrome
If you want move placeholder text right and leave the cursor on the blank space you need to add space(s) at the start of the placeholder attribute:
<input type="email" placeholder=" Your email" />
Removing the line-height indeed makes your text align with your placeholder-text, but it doesn't properly solve your problem since you need to adapt your design to this flaw (it's not a bug). Adding vertical-align won't do the deal either. I haven't tried in all browsers, but it doesn't work in Safari 5.1.4 for sure.
I have heard of a jQuery fix for this, that is not cross-browser placeholder support (jQuery.placeholder), but for styling placeholders, but I haven't found it yet.
In the meantime, you can resolve to the table on this page which shows different browser support for different styles.
Edit: Found the plugin! jquery.placeholder.min.js provides you with both full styling capabilities and cross-browser support into the bargain.
Remove line-height or set using padding...it's working in all browser
I've created a fiddle using your screenshot as a background image and stripping out the extra mark-up, and it seems to work fine
http://jsfiddle.net/fLdQG/2/ (webkit browser required)
Does this work for you? If not, can you update the fiddle with your exact mark-up and CSS?
I noticed the issue the moment I updated Chrome on os x to the latest stable release (9.0.597.94) so this is a Chrome bug and hopefully will be fixed.
I'm tempted not to even attempt to work around this and just wait for the fix. It'll just mean more work taking it out.
The placeholder is not affected by line-height and padding is inconsistent on browsers.
I have found another solution though.
VERTICAL-ALIGN. This is probably the only time it works but try that instead and cave many lines of CSS code.
I found the answer that remedied my frustrations regarding this on John Catterfeld's blog.
... Chrome (v20-30) implements almost all styles but with a major caveat – the placeholder styles do no resize the input box, so stay clear of things like line-height and padding top or bottom.
If you are using line-height or padding you are going to be frustrated with the resulting placeholder. I haven't found a way around that up to this point.
I'm currently working with a textbox that has a background. I was wondering if it's possible to center text (vertically) inside the textbox.
important: it's perfectly centered in firefox. Only IE it writes it too high for some reason. I've tried line-height, padding, and margin. Nothing works. Any ideas?
EDIT: This is my current CSS. I should say that I've tried the margin-top method and it didn't work for me. Also, as I mentioned, this is only for IE. I have IE specific style sheets so no worries.
.textValue { color: black; font-size: 12px; font-family: David, sans-serif; }
input { width: 110px; padding: 0 2px; padding-right: 4px; height: 20px; border: solid 1px white; margin-bottom: 0px; background: url(../images/contactTextBg.png) no-repeat top right; }
label { float: right; margin-left: 5px; font-size: 13px; }
For IE, I have the following:
.textValue { font-size: 14px; }
as for HTML:
<tr>
<td><label for="name">name</label></td>
<td><input type="text" name="name" id="name" class="textValue" value="" /></td>
</tr>
Thanks,
Amit
I wonder how you are able to align the text in a textbox but since you say, here is the suggestion:
For idiot IE, you can use this IE specific hack:
margin-top:50px; /* for standard-compliant browsers */
*margin-top:50px; /* for idiot IE */
_margin-top:50px; /* for idiot IE */
You might want to try other similar properties if you want rather than margin-top.
Did you try?:
input {vertical-align: middle;}
I know this one's a bit old, but I've just run into the same problem. The solution given here didn't help me which seemed strange. In my case it was the line height that was set to "1em". Changing the line height to something that resembled the height of the text box, rather than the size of the font it contained was the solution. This also continues to function as expected in Firefox, etc.
We have buttons of many sizes and colors that use background images. There is a label on the background image itself, but we need to keep the button's text in the HTML for usability/accessibility. How do I make the text disappear in all browsers?
Modern browsers are easy, I just used -
color: transparent;
It's Internet Explorer 7 that I can't get to comply. I've tried these CSS properties, and none of them can remove the text completely without destroying my site's layout in the process.
font-size: 0px;
line-height: 0;
text-indent: -1000em;
display: block;
padding-left: 1000px;
I would very much appreciate any help.
Personally, I go for the all CSS approach:
{ display: block;
text-indent: -9999em;
text-transform: uppercase; }
For whatever reason, text-transform: uppercase; does the trick for IE7. Of course, you'll probably have your own CSS along with that for additional styling (if needed).
Additional to your
color: transparent;
You can use something like
padding-left: 3000px;
overflow: hidden;
Regards
In some cases you can use the propery "content" to change what is contained in the element, personally though I would use javascript to do it.
Just write blank text into the element.
If the button is an input submit button, use the image
<input type="image" src="/images/some_image.png" />
You can style this with CSS
input[type="image"] {
border: 1px solid red;
width: 150px;
height: 35px;
}
If they are links, Dave provided the answer.
How do I make the text disappear in
all browsers?
I suppoose you want the altarnative text to disappear if the image is loaded.
For this puprpose you can use this:
<INPUT TYPE="image" SRC="images/yourButtongif" HEIGHT="30" WIDTH="100" ALT="Text In Case There Is No Image" />
You can apply additional styles if needed, but this minimum will do the job for you.
If I understand the question correctly, this might work (I don't have IE7 to test on at the moment, so not 100% sure)
For markup like this:
<a href="javascript:return false;" class="button" id="buttonOK"><span
class="icon">Ok</span></a>
Use this css:
span.icon {
/*visibility: hidden;*/
display:block;
margin-left:-1000;
width:100px;
}
or this might work depending on your requirements for usability/accessibility:
span.icon {
visibility: hidden;
}
I don't know what users / programs the labels need to be in the HTML for, but if it's for text browsers and such, maybe you could insert a JavaScript that removes the labels onLoad?
JQuery or Prototype would make that very easy.