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
Related
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 have a drop down that contains options. I would like to partially break & bold some text as well as insert context breaks. I tried using CSS as well as HTML tags but I'm unable to get it. Can someone please suggest a solution?
Thanks in advance
I know this question is a bit old (or not new at least), but I'd like to show a very simple way to emulate a select element rather than using a "replacement plugin" as suggested in How to style the option of a html “select”?.
There are probably many, MANY ways to do this, but I try to keep things extremely simple, so my method of emulation only uses CSS. It is rather bare bones, but I'd like to point out that it is not a complicated thing to do so you might not need a plug in to do it.
Note1: Instead of using <option>, I used <label>. Since <label> is an interactive element, putting something interactive inside (like a <button>) would probably mess it up. Options are normally non-interactive anyway, but just be aware that this simple emulation can't do everything.
Note2: If you want to be able to select multiple options, just do a search for "radio" and replace with "checkbox".
Emulating Select Using Radio - No Collapse
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
background-color: black;
color: #28AADC;
}
/* none functional styles. just regular styling */
.radio_select {
background-color: #28AADC;
display: inline-block;
}
<div class="radio_select">
<div>
<input id="rad1" type="radio" name="radio_select" />
<label for="rad1">Option 1</label>
</div>
<div>
<input id="rad2" type="radio" name="radio_select" checked="checked" />
<label for="rad2">Option 2</label>
</div>
<div>
<input id="rad3" type="radio" name="radio_select" />
<label for="rad3">Option 3</label>
</div>
</div>
Radio select emulation - with collapse
Note: this won't work for mobile devices since it uses :hover.
input[type="radio"] {
display: none;
}
/* style this to your heart's content */
input[type="radio"] + label {
display: none;
}
input[type="radio"]:checked + label {
background-color: black;
color: #28AADC;
display: inline-block;
}
.radio_select:hover label {
display: inline-block;
}
/* none functional styles. just regular styling */
.radio_select {
background-color: #28AADC;
display: inline-block;
}
<!-- NOTE: This technique uses hover, so it won't work for mobile devices.
I couldn't think of a pure CSS way to solve that. Sorry. -->
<div class="radio_select">
<div>
<input id="rad1" type="radio" name="radio_select" />
<label for="rad1">Option 1</label>
</div>
<div>
<input id="rad2" type="radio" name="radio_select" />
<label for="rad2">Option 2</label>
</div>
<div>
<input id="rad3" type="radio" name="radio_select" checked="checked" />
<label for="rad3">Option 3</label>
</div>
</div>
I'm currently using following login form where I want to change the design a bit:
http://html-form-guide.com/php-form/php-login-form.html
I want to place ' Login ' into the middle of the box, instead the left:
I've also found out that you can change the textsize, font etc. in fg_membersite.css (line 17). What's interesting is that in Chrome it IS displayed in the middle, only in Firefox it's shown on the left. Since I'm a new CSS worker I wanted to ask if anybody could help me fixing this incompatiblity problems here.
Since it also contains lots of Javascript based stuff I wasn't sure if I posting source codes here would be sensible, because I'd have to post the whole source anyway then.
Thanks in advance!
EDIT: Much prettier now. Thanks:
http://rapidhdd.com/images/4013242013-10-06_1842.png
Use this for the center text part:
<form id='login' action='login.php' method='post' accept-charset='UTF-8'>
<fieldset >
<legend align="center">Login</legend>
<input type='hidden' name='submitted' id='submitted' value='1'/>
<label for='username' >UserName*:</label>
<input type='text' name='username' id='username' maxlength="50" />
<label for='password' >Password*:</label>
<input type='password' name='password' id='password' maxlength="50" />
<input type='submit' name='Submit' value='Submit' />
</fieldset>
</form>
I guess you've changed the HTML code but note the: <legend align="center">Login</legend>
align="center"
http://jsfiddle.net/4szBC/
EDIT:
Since it seems like align is deprecated you, can do this using by using css.
legend {
text-align: center;
}
If you want the css right in HTML, add it in a <script> tag and place it in <head>. Like this:
<script type="text/css">
legend {
text-align: center;
}
</script>
http://jsfiddle.net/4szBC/1/
add to submit button few CSS rules:
input[type=submit] {
display: inline-block;
margin: 0 auto;
padding: 10px 30px;
}
OK, I am really embarrassed that I cannot figure this out but...
I have form labels that are followed by a "required" asterisk. The asterisk simply drops to the next line under the label text instead of aligning next to the text.
I want the required asterisk to end up on the same line as the label text. I shouldn't have to use floats for this right? They are in the same div so I am not sure why they just don't lay next to each other.
Thanks!
<div id="letsGetStarted">
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<div>#Html.LabelFor(model => model.NewClub.NewClubName) <span class="required">*</span></div>
#Html.EditorFor(model =>model.NewClub.NewClubName)
#Html.ValidationMessageFor(model => model.NewClub.NewClubName)
<div>
#Html.LabelFor(model => model.ClubTypes) <span class="required">*</span>
</div>
#Html.DropDownListFor(model => model.ClubTypes, Model.ClubTypes)
#Html.ValidationMessageFor(model => model.ClubTypes)
<p>
<input type="submit" name="submit" value="Submit" class="btn"/> <input type="reset" name="reset" value="Cancel" class="btn ltgrey" />
</p>
}
</div>
I have a working example of the issue here:
Wrap span into the <label></label>
<div>
<label for="NewClub_NewClubName">Name your club <span class="required">*</span></label>
</div>
you can set margin to move it to left according to your need:
Example
Updated Fiddle
Update
As you are using #LabelFor() so give this to your label:
display:inline;
If you cannot mess with HTML, but you can with CSS>
label{display:inline; clear:both;}
be careful, because this will affect all labels...
In plain HTML5 and CSS3, you can use the following rule. I don't know how to translate this to ASP.net:
.required:after {
content: "*";
}
Then, just write your HTML as
<div>
<label for="NewClub_NewClubName" class="required">Name your club.</label>
<input ...>
</div>
On the other hand, you can use the HTML5 required attribute, which I don't know how to translate to ASP. With placeholder, you might not need a label.
<div>
<input type="text" name="newClub" placeholder="New club name" required/>
</div>
You can style this using the pseudoclass :required. If you put the label afterwards so you can use the CSS3 adjacent selector, you can even try:
<div>
<input type="text" id="newClub" name="newClub"
placeholder="New club name" required/>
<label for="newClub">New club name.</label>
</div>
and
input:required + label:before {
content: "*";
color: red;
}
But again, I don't know ASP.
Try This
#letsgetStarted {
overflow:hidden;
}
#letsgetStarted label {
float:left;
width:auto;
}
#letsgetStarted span.required {
float:left;
}
Place your html text inside label tags.
I did not try it though. It should work for you.
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