I have some disabled input text fields that I want the text color to be black because it's too greyed out.
I know its a simple one-line code but it won't work for some reason.
Other CSS properties work while it's disabled like the background color and stuff but not the text color.
Here's the CSS:
input[type="text"]:disabled {
color: black;
}
Here's the HTML:
<div class="form-container">
<label for="name">Full Name:</label>
<input id="profileName" type="text" disabled="disabled">
<label for="email">Email ID:</label>
<input id="profileEmail" type="text" disabled="disabled">
<label for="address">Address Line:</label>
<input id="profileAddress" type="text" disabled="disabled">
<label for="city">City:</label>
<input id="profileCity" type="text" disabled="disabled">
<label for="postcode">Postcode:</label>
<input id="profilePostcode" type="text" disabled="disabled">
<label for="state">State:</label>
<input id="profileState" type="text" disabled="disabled">
</div>
This is what it looks like on the android emulator running API 28.
I'm not sure why other properties work but not the text color.
Any ideas?
P.S. this is a cordova project and i am building it in Jquery Mobile v1.4.5
Nice to reply to you about the issue you are facing.
Since, you are using Jquery Mobile. The Jquery mobile on DOM generates div covering the input box. Since, you are also using disabled property of input box. So, jquery mobile implements a class on that div and there the opacity level have been defined.
So, add this:-
.form-container .ui-input-text.ui-state-disabled { opacity:1; color:black; }
Working Fiddle :- https://jsfiddle.net/h3Lbadgv/1/
Hope it works for you.
Thanks
Can you use this one.
.form-container input:disabled{color: black}
<div class="form-container">
<label for="name">Full Name:</label>
<input value="XXXPPPAAPP" id="profileName" type="text" disabled="disabled">
<label for="email">Email ID:</label>
<input value="XXXPPPAAPP" id="profileEmail" type="text" disabled="disabled">
<label for="address">Address Line:</label>
<input value="XXXPPPAAPP" id="profileAddress" type="text" disabled="disabled">
<label for="city">City:</label>
<input value="XXXPPPAAPP" id="profileCity" type="text" disabled="disabled">
<label for="postcode">Postcode:</label>
<input id="profilePostcode" type="text" disabled="disabled">
<label for="state">State:</label>
<input id="profileState" type="text" disabled="disabled">
</div>
Hope It Helps.
I have the following form:
<form>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
One.
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
<label class="form-check-label" for="defaultCheck2">
Two.
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck3">
<label class="form-check-label" for="defaultCheck3">
Three.
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck4">
<label class="form-check-label" for="defaultCheck4">
Four.
</label>
</div>
</form>
I understand that I can use the following to style checkboxes that are checked:
.form-check-input:checked + label {
color: blue
}
I have a form with a varying number of multiple checkboxes. Is there a way to apply the style only if all checkboxes in a form are checked?
I would like to do this in CSS only.
If all of your checkboxes are required you can leverage the :valid pseudo-class on the form to select it or any of its descendants.
Else as #Pete said there is currently no way to do it.
This is my HTML code:
<label class="control-label col-md-4">Availability <span class="required">*</span></label>
<div class="field_wrapper col-md-8">
<label class="checkbox">
<input type="checkbox" name="custom[availability][]" class="reg_form_availability" value="Sunday" tabindex="14">Sunday
</label>
<label class="checkbox">
<input type="checkbox" name="custom[availability][]" class="reg_form_availability" value="Monday" tabindex="14">Monday</label>
<label class="checkbox">
<input type="checkbox" name="custom[availability][]" class="reg_form_availability" value="Tuesday" tabindex="14">Tuesday</label>
<label class="checkbox">
<input type="checkbox" name="custom[availability][]" class="reg_form_availability" value="Wednesday" tabindex="14">Wednesday</label>
<label class="checkbox">
<input type="checkbox" name="custom[availability][]" class="reg_form_availability" value="Thursday" tabindex="14">Thursday</label>
<label class="checkbox">
<input type="checkbox" name="custom[availability][]" class="reg_form_availability" value="Friday" tabindex="14">Friday</label>
<label class="checkbox">
<input type="checkbox" name="custom[availability][]" class="reg_form_availability" value="Saturday" tabindex="14">Saturday
</label>
<label class="checkbox">
<input type="checkbox" name="custom[availability][]" class="reg_form_availability" value="All week long" tabindex="14">All week long</label>
<input type="hidden" name="custom[availability][]" value="--">
<p class="description">Please specify the week days the trip can be offered</p>
</div>
The output looks something like this, just with a checkbox on the left of every selection:
Availability *
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
All week long
Please specify the week days the trip can be offered
How can I change the selections to be on the same line floating left? Two lines is better actually (4 selections each line). If i had accesses to the HTML code I probably would have use bootstrap col-md to do so but the problem that this is a WordPress website and the HTML is not shown as it is above in the PHP files.
Thanks in advance,
Yaniv
I have a simple HTML form that uses the Twitter Bootstrap framework (v3.1.1). On the smartphone/iPhone these checkboxes are quite small and hard to select with your finger. I would like to make them larger/more spaced out so they are easier to hit but haven't found a way so far - is this even possible.
Here's my form html:
<div class="container">
<div>
<p>Tick all that apply:</p>
<form role="form" action="continue.php" method="post">
<input type="hidden" name="selectionID" value="4567">
<div class="checkbox">
<label>
<input type="checkbox" name="selection[]" value="Fever/Temperature">Apples<br>
<input type="checkbox" name="selection[]" value="Swelling or redness at injection site">Oranges<br>
<input type="checkbox" name="selection[]" value="Pain at injection site">Bananas<br>
<input type="checkbox" name="selection[]" value="Tired/Fatigued">Pears<br>
<input type="checkbox" name="selection[]" value="Irritable">Mangoes<br>
<input type="checkbox" name="selection[]" value="Sleep pattern change">Watermelon<br>
<input type="checkbox" name="selection[]" value="Other">Other<br>
</label>
</div>
<button type="submit" class="btn btn-primary">Next</button>
</form>
</div>
</div>
I've also setup a jsfiddle here
This isn't easy to do cross-broswer .. check out the study made here: http://www.456bereastreet.com/lab/form_controls/checkboxes/
Also, make sure you're using correct HTML code. You should wrap each of your checkboxes with label, like this:
<div class="checkbox">
<label>
<input type="checkbox" name="selection[]" value="Fever/Temperature" />Apples<br/>
</label>
<label>
<input type="checkbox" name="selection[]" value="Swelling or redness at injection site" />Oranges<br/>
</label>
<label>
<input type="checkbox" name="selection[]" value="Pain at injection site" />Bananas<br/>
</label>
<!-- etc. -->
</div>
I have a Bootstrap form with some inline radio buttons and a label. I'd like to keep the label on the same line as the buttons, but I can't seem to make that happen. Here's my approach:
<form>
<div class="control-group">
<label class="control-label">Some label</label>
<div class="controls">
<label class="radio inline">
<input type="radio" value="1"/>
First
</label>
<label class="radio inline">
<input type="radio" value="2"/>
Second
</label>
</div>
</div>
</form>
Fiddle: http://jsfiddle.net/GaDbZ/2/
I also tried this:
<form>
<div class="form-inline">
<label class="control-label">Some label</label>
<label class="radio">
<input type="radio" value="1"/>
First
</label>
<label class="radio">
<input type="radio" value="2"/>
Second
</label>
</div>
</form>
But everything is smooshed together. Fiddle: http://jsfiddle.net/GaDbZ/3/
How can I get the horizontal spacing from the first one combined with the vertical spacing of the second?
Also, I should note that in real life, I have a bunch of other stuff going on in the form, so I don't want to use form-horizontal because it creates funky margins that don't jive with the other stuff I have in there.
If you add the 'radio inline' class to the control label in the solution provided by user1938475 it should line up correctly with the other labels. Or if you're only using 'radio' like your 2nd example just include the 'radio' class.
<label class="radio control-label">Some label</label>
OR for 'radio inline'
<label class="radio-inline control-label">Some label</label>
Since Bootstrap 3 you have to use checkbox-inline and radio-inline classes on the label.
This takes care of vertical alignment.
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
This may work for you, Please try this.
<form>
<div class="form-inline">
<div class="controls-row">
<label class="control-label">Some label</label>
<label class="radio inline">
<input type="radio" value="1" />First
</label>
<label class="radio inline">
<input type="radio" value="2" />Second
</label>
</div>
</div>
</form>
This is all nicely lined up including the field label. Lining up the field label was the tricky part.
HTML Code:
<div class="form-group">
<label class="control-label col-md-5">Create a</label>
<div class="col-md-7">
<label class="radio-inline control-label">
<input checked="checked" id="TaskLog_TaskTypeId" name="TaskLog.TaskTypeId" type="radio" value="2"> Task
</label>
<label class="radio-inline control-label">
<input id="TaskLog_TaskTypeId" name="TaskLog.TaskTypeId" type="radio" value="1"> Note
</label>
</div>
</div>
CSHTML / Razor Code:
<div class="form-group">
#Html.Label("Create a", htmlAttributes: new { #class = "control-label col-md-5" })
<div class="col-md-7">
<label class="radio-inline control-label">
#Html.RadioButtonFor(model => model.TaskTypeId, Model.TaskTaskTypeId) Task
</label>
<label class="radio-inline control-label">
#Html.RadioButtonFor(model => model.TaskTypeId, Model.NoteTaskTypeId) Note
</label>
</div>
</div>
In Bootstrap 4 you can use the form-check-inline class.
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="queryFieldName" id="option1" value="1">
<label class="form-check-label" for="option1">First</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="queryFieldName" id="option2" value="2">
<label class="form-check-label" for="option2">Second</label>
</div>
Key insights for me were:
- ensure that label content comes after the input-radio field
- I tweaked my css to make everything a little closer
.radio-inline+.radio-inline {
margin-left: 5px;
}
Best is to just Apply margin-top: 2px on the input element.
Bootstrap adds a margin-top: 4px to input element causing radio button to move down than the content.