I'm trying to add some style on a specific label of my form_for.
My form_for has been created like this :
<%= f.input :description, label: " description" %>
I can modify all the label thank's to :
.form-control-label {
margin-left: 118px;
text-align: justify;
}
But I want to play with one specific ;
description
I tried so many things with required"" ,
I tried to put a class in the label but I don't know how to do with Bootsrap,
I tried to add :child, ...
But I don't find how to do ....
I started to code 3 months ago and I'm stuck for few days now :)
Thank you for your help
Can you share the rendered html for this label?
As you said you've already tried adding an extra css class to modify this label specifically. Have you tried inspecting the element using chrome dev tools or any other? Should be a pretty straight forward fix for this one.
<div>
<label class="generic">I'm a label</label>
<input type="text" />
</div>
<div>
<label class="generic">I'm a label</label>
<input type="text" />
</div>
<div>
<label class="generic special">I'm a label</label>
<input type="text" />
</div>
.generic{color: red; font-size: 18px;}
.special{color: blue; }
Codepen - https://codepen.io/anon/pen/oMomWQ
I have a field in my html page like this:
<input type="text" class="form-control" readonly>
I would like it to look like normal text between <p> tags. Please help me CSS wizards.
you can try this
CSS
input[readonly]{
background-color:transparent;
border: 0;
font-size: 1em;
}
if you want to use with a class you can try this one
HTML
<input type="text" class="form-control classname" value="Demo" readonly />
CSS
input[readonly].classname{
background-color:transparent;
border: 0;
font-size: 1em;
}
if you want to make the <input> look like inline text (resizing the input element) please check this fiddle https://jsfiddle.net/Tanbi/xyL6fphm/ and please dont forget calling jquery js library
I realise the question is about Bootstrap 3, but it might be good to know that Bootstrap 4 now has this out of the box: https://getbootstrap.com/docs/4.0/components/forms/#readonly-plain-text
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email#example.com">
</div>
in addition to the accepted answer, I found that the following style works a bit better:
input[readonly] {
background-color: transparent;
border: 0;
box-shadow: none;
}
Bootstrap introduces a shadow that one may want to hide.
<input type="text" placeholder="Show your text" readonly style="border: 0px;" />
That should work
Bootstrap 5 has form-control-plaintext class for that:
<input type="text" readonly class="form-control-plaintext" id="email"/>
I face some layout differences in IE and in Chrome. I have searched Stack overflow high and low for solutions and tried some of it... I tried setting box-sizing to initial...it did not work...there fore tried setting height of the text box it did work but still a big differences. I also tried changing doctype to strict. I encounter this problem as part of my project.
The Problem:
I have form in a div tag. In the form there are 4 rows of text field. I put the preview on IE and the preview on Chrome side by side to compare and realise that it is the spacing between the text area that causes the differences in height.
The Code on my html file:
<div class="leftdetails">
<form class="form2" name="form2" method="post" action="">
<label for="fname">First Name: </label>
<input type="text" name="fname" id="fname" class="regfields"/>
<br />
<label for="cdsid">CDSID: </label>
<input type="text" name="cdsid" id="cdsid" class="regfields"/>
<br />
<label for="mail">Mail Drop: </label>
<input type="text" name="mail" id="mail" class="regfields"/>
<br />
<label for="dateofbirth">D.O.B.: </label>
<input type="text" name="dateofbirth" id="dateofbirth" class="regfields"/>
<br />
</form>
</div>
The code on my CSS (external)
.leftdetails
{
font-family:Myriad Pro;
font-size:18px;
float:left;
width:50%;
text-align:center;
}
.regfields
{
width:200px;
height:20px;
vertical-align:bottom;
}
.form2
{
text-align:right;
margin-right:50px;
}
This is not published online yet therefore there is not link...but I will be glad to provide screenshot. Its a very minor difference but I just want to understand why.
Try to set the padding-top and padding-bottom to 0px in the regfields CSS class. Maybe also margin-top and margin-bottom
Try using a conditional IE statement in your CSS to target only the Internet Explorer browser.
If you don't know how to do so, examples can be found here
Like a lot of people, I'd like to customize the ugly input type=file, and I know that it can't be done without some hacks and/or javascript. But, the thing is that in my case the upload file buttons are just for uploading images (jpeg|jpg|png|gif), so I was wondering if I could use a "clickable" image which would act exactly as an input type file (show the dialog box, and same $_FILE on submitted page).
I found some workaround here, and this interesting one too (but does not work on Chrome =/).
What do you guys do when you want to add some style to your file buttons? If you have any point of view about it, just hit the answer button ;)
This works really well for me:
.image-upload>input {
display: none;
}
<div class="image-upload">
<label for="file-input">
<img src="https://icons.iconarchive.com/icons/dtafalonso/android-lollipop/128/Downloads-icon.png"/>
</label>
<input id="file-input" type="file" />
</div>
Basically the for attribute of the label makes it so that clicking the label is the same as clicking the specified input.
Also, the display property set to none makes it so that the file input isn't rendered at all, hiding it nice and clean.
Tested in Chrome but according to the web should work on all major browsers. :)
EDIT:
Added JSFiddle here: https://jsfiddle.net/c5s42vdz/
Actually it can be done in pure css and it's pretty easy...
HTML Code
<label class="filebutton">
Browse For File!
<span><input type="file" id="myfile" name="myfile"></span>
</label>
CSS Styles
label.filebutton {
width:120px;
height:40px;
overflow:hidden;
position:relative;
background-color:#ccc;
}
label span input {
z-index: 999;
line-height: 0;
font-size: 50px;
position: absolute;
top: -2px;
left: -700px;
opacity: 0;
filter: alpha(opacity = 0);
-ms-filter: "alpha(opacity=0)";
cursor: pointer;
_cursor: hand;
margin: 0;
padding:0;
}
The idea is to position the input absolutely inside your label. set the font size of the input to something large, which will increase the size of the "browse" button. It then takes some trial and error using the negative left / top properties to position the input browse button behind your label.
When positioning the button, set the alpha to 1. When you've finished set it back to 0 (so you can see what you're doing!)
Make sure you test across browsers because they'll all render the input button a slightly different size.
Great solution by #hardsetting,
But I made some improvements to make it work with Safari(5.1.7) in windows
.image-upload > input {
visibility:hidden;
width:0;
height:0
}
<div class="image-upload">
<label for="file-input">
<img src="https://via.placeholder.com/300x300.png?text=UPLOAD" style="pointer-events: none"/>
</label>
<input id="file-input" type="file" />
</div>
I have used visibility: hidden, width:0 instead of display: none for safari issue and added pointer-events: none in img tag to make it working if input file type tag is in FORM tag.
Seems working for me in all major browsers.
Hope it helps someone.
A much better way than writing JS is to use native,
and it turns to be lighter than what was suggested:
<label>
<img src="my-image.png">
<input type="file" name="myfile" style="display:none">
</label>
This way the label is automatically connected to the input that is hidden.
Clicking on the label is like clicking on the field.
You can replace image automatically with newly selected image.
<div class="image-upload">
<label for="file-input">
<img id="previewImg" src="https://icon-library.net/images/upload-photo-icon/upload-photo-icon-21.jpg" style="width: 100px; height: 100px;" />
</label>
<input id="file-input" type="file" onchange="previewFile(this);" style="display: none;" />
</div>
<script>
function previewFile(input){
var file = $("input[type=file]").get(0).files[0];
if(file){
var reader = new FileReader();
reader.onload = function(){
$("#previewImg").attr("src", reader.result);
}
reader.readAsDataURL(file);
}
}
</script>
I would use SWFUpload or Uploadify. They need Flash but do everything you want without troubles.
Any <input type="file"> based workaround that tries to trigger the "open file" dialog by means other than clicking on the actual control could be removed from browsers for security reasons at any time. (I think in the current versions of FF and IE, it is not possible any more to trigger that event programmatically.)
This is my method if i got your point
HTML
<label for="FileInput">
<img src="tools/img/upload2.png" style="cursor:pointer" onmouseover="this.src='tools/img/upload.png'" onmouseout="this.src='tools/img/upload2.png'" alt="Injaz Msila" style="float:right;margin:7px" />
</label>
<form action="upload.php">
<input type="file" id="FileInput" style="cursor: pointer; display: none"/>
<input type="submit" id="Up" style="display: none;" />
</form>
jQuery
<script type="text/javascript">
$( "#FileInput" ).change(function() {
$( "#Up" ).click();
});
</script>
I have had lots of issues with hidden and not visible inputs over the past decade sometimes things are way simpler than we think.
I have had a little wish with IE 5,6,7,8 and 9 for not supporting the opacity and thus the file input would cover the upload image however the following css code has resolved the issue.
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
The following snipped is tested on chrome, IE 5,6,7,8,9,10 the only issue in IE 5 is that it does not support auto margin.
Run the snippet simply copy and paste the CSS and HTML modify the size as you like.
.file-upload{
height:100px;
width:100px;
margin:40px auto;
border:1px solid #f0c0d0;
border-radius:100px;
overflow:hidden;
position:relative;
}
.file-upload input{
position:absolute;
height:400px;
width:400px;
left:-200px;
top:-200px;
background:transparent;
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
.file-upload img{
height:70px;
width:70px;
margin:15px;
}
<div class="file-upload">
<!--place upload image/icon first !-->
<img src="https://i.stack.imgur.com/dy62M.png" />
<!--place input file last !-->
<input type="file" name="somename" />
</div>
its really simple you can try this:
$("#image id").click(function(){
$("#input id").click();
});
You can put an image instead, and do it like this:
HTML:
<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1" name="file1" style="display:none" />
JQuery:
$("#upfile1").click(function () {
$("#file1").trigger('click');
});
CAVEAT:
In IE9 and IE10 if you trigger the onclick in a file input via javascript the form gets flagged as 'dangerous' and cannot be submmited with javascript, no sure if it can be submitted traditionaly.
The input itself is hidden with CSS visibility:hidden.
Then you can have whatever element you whish - anchor or image.., when the anchor/image is clicked, trigger a click on the hidden input field - the dialog box for selecting a file will appear.
EDIT: Actually it works in Chrome and Safari, I just noticed that is not the case in FF4Beta
Working Code:
just hide input part and do like this.
<div class="ImageUpload">
<label for="FileInput">
<img src="../../img/Upload_Panel.png" style="width: 18px; margin-top: -316px; margin-left: 900px;"/>
</label>
<input id="FileInput" type="file" onchange="readURL(this,'Picture')" style="cursor: pointer; display: none"/>
</div>
form input[type="file"] {
display: none;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Simple File Upload</title>
<meta name="" content="">
</head>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<label for="fileToUpload">
<img src="http://s3.postimg.org/mjzvuzi5b/uploader_image.png" />
</label>
<input type="File" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>
</body>
</html>
RUN SNIPPET or Just copy the above code and execute. You will get what you wanted. Very simple and effective without javascript. Enjoy!!!
<script type="text/javascript">
function upl() {
var fileSelector = document.createElement('input');
fileSelector.setAttribute('type', 'file');
fileSelector.setAttribute('name', 'uploimg');
fileSelector.setAttribute('accept', 'image/*');
fileSelector.click();
fileSelector.style.display = "none";
fileSelector.onchange = function() {
document.getElementById("indicator").innerHTML = "Uploaded";
};
document.getElementById("par_form").appendChild(fileSelector);
}
</script>
<form id="par_form">
<img src="image_url" onclick="upl()"><br>
<span id="indicator"></span><br>
<input type="submit">
</form>
I have seen forms that can do this without using <br /> etc.
Here's my form:
<form id="staff-login" name="staff-login" action="/staff/login/" method="POST">
<label for="staff-login-email">Email</label>
<input type="text" id="staff-login-email" name="email" value="" />
<label for="staff-login-address">Password</label>
<input type="password" id="staff-login-password" name="password" value="" />
<input type="submit" id="staff-login-submit" name="submit" value="Login" />
</form>
And an example of what I'm taking about:
http://img694.imageshack.us/img694/4879/43201622.gif
All the examples I can Google insert extra <div>s and mess with the code, I'm wondering if there is a way with the code I have (or if you can structure my code "better") to achieve what I need?
using css, float your label to the left. Also, make your input elements blocks with a decent margin...
label { float: left; width: 200px; }
input { margin-left: 220px; display: block; }
input.staff-login-submit { margin-left: 500px }
I've just guessed at a few numbers for the margins, so tweak as needed.
<label> and <input> are inline elements. Either you use <br /> (which is totally ok) or you specify them as block elements via CSS.
You can learn more about inline and block elements.