Im crating a form with many fields and a checkboxes, the problem is that im trying to customize the checkbox(unsuccessfully) according with the style of my form.
As you can see in the picture, the tick of the checkbox is black, and i need it green. How can I change the color? How can I change the size of checkbox?
This is my HTML:
<div id="Cajamitad1">
<form role="form">
<div class="checkbox">
<label><input type="checkbox" value="" >
<a class="FontStyle">Vegano</a>
</label>
</div>
< div class="checkbox">
<label><input type="checkbox" value="">
<a class="FontStyle">Diabetico</a>
</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">
<a class="FontStyle">Celiaco</a>
</label>
</div>
</form>
</div>
and this my CSS:
#ContForm{
display: inline;
box-sizing: border-box;
}
.checkbox{
margin: 10px;
padding: 10px;
}
.checkbox input[type="checkbox"]{
margin-left: 5px;
}
#Cajamitad1{
margin-top: 10px;
width: 40%;
float: left;
padding-left: 200px;
}
Correct me if I'm wrong, but as far as I know this is not possible.
Here is my reasoning: if you inspect the bootstrap checkbox then you see that the checkbox itself is drawn by an <input type="checkbox"> and you have very limited control over that. Some browsers let you change the size of the checkbox but not all of them.
So the only thing you can do is to make your own checkbox, e.g. by using two images and some css.
Or often more mobile friendly are just two buttons side by side "yes" and "no". Then if you click one it becomes active, like some kind of toggle button.
Related
I want to make selections more visual for colors. For example I want a way to add either an HTML select menu or checkbox to select color.
(blue color square) - Blue
(white color square) - White
(red color square) - Red.
Is it possible to do with select menu? If not whats best way to do it with checkboxes? stylize each one differently with CSS? Or add an image in front of it?
Any code samples or links appreciated, thx.
Since you're only looking for a few colors instead of the whole range, it's probably best to build your own input. We're going to want:
input[type=radio] to select the color
Labels for the inputs containing the label and color
To do this, we can do something like this
<form>
<div class="colorChoice">
<input type="radio" name="color" value="#ff0000" id="select-red">
<label for="select-red"><div class="bg-red"></div> Red</label>
</div>
...
</form>
Each div contains the HTML for each color selection: an input with the value equal to the color's hex code (although you could change this to whatever you want) and a label with a color box and the associated color name.
To create the color boxes, we can set the size and background color of the divs. Doing CSS is probably best, it's wasteful to load images that really aren't necessary.
.colorChoice label div {
width: 24px;
height: 16px;
display: inline-block;
}
.bg-red {
background-color: #ff0000;
}
...
An advantage of this is that the bg-* classes are not just limited to this form - it can also be applied to other elements that need background colors.
.colorChoice label div {
width: 24px;
height: 16px;
display: inline-block;
}
.bg-red {
background-color: #ff0000;
}
.bg-green {
background-color: #00ff00;
}
.bg-blue {
background-color: #0000ff;
}
.bg-black {
background-color: #000000;
}
<form>
<div class="colorChoice">
<input type="radio" name="color" value="#ff0000" id="select-red">
<label for="select-red"><div class="bg-red"></div> Red</label>
</div>
<div class="colorChoice">
<input type="radio" name="color" value="#00ff00" id="select-green">
<label for="select-green"><div class="bg-green"></div> Green</label>
</div>
<div class="colorChoice">
<input type="radio" name="color" value="#0000ff" id="select-blue">
<label for="select-blue"><div class="bg-blue"></div> Blue</label>
</div>
<div class="colorChoice">
<input type="radio" name="color" value="#000000" id="select-black">
<label for="select-black"><div class="bg-black"></div> Black</label>
</div>
</form>
If you want to use checkboxes instead, you can replace name="color" value="..." with just name="..." and change the input types from radio to checkbox.
I'm using Bootstrap 3 and trying to center a radio button, an icon, and some text and am having no luck.
My form simply is simply stuffing everything inside a label tag which seems to be a lot.
The skeleton code I started with is below:
<form role="form">
<label class="radio-inline">
<input type="radio" name="optradio">
<br/>
<div class="iconOne"></div>
<br/>
Option 1
</label>
<label class="radio-inline">
<input type="radio" name="optradio">
<br/>
<div class="iconTwo"></div>
<br/>
Option 2
</label>
<label class="radio-inline">
<input type="radio" name="optradio">
<br/>
<div class="iconThree"></div>
<br/>
Icon Three
</label>
</form>
Here's the JS fiddle:
http://jsfiddle.net/4zh28rcn/4/
I'm tempted to try something like Flexbox but am wary of importing more third party libraries.
Thanks for any helpful pointers!
I'm not sure where it's coming from, but you appear to have a stray alignment pushing the <input> 20px to the left of where it ought to be.
If you add the CSS below to what you have in your fiddle already, you will see the radio buttons, the icon images and the text all centered and all lined up:
.radio-inline {
width: 100px;
padding: 0;
text-align: center;
}
input {
display: block;
position: relative;
left: 20px;
width: 100%;
}
I have this registration form I am setting up and I've set the page's background to grey. I want the area in the center, where you're supposed to fill in the info, to be white. How should I do this?
I've included a picture of how the site looks now, the white part should cover the text and all the boxes.
My css code for background:
body{
background-color:#D2D7D3;
background-size:1500px 1000px;
z-index:0
position:absolute;
}
This is something you could do, wrap your form contents in a div and style the div around it.
This will create the white part you want behind the form.
Example Form
<div class="form-container">
<form>
<label for="email"> Email </label>
<input type="text" name="email"></input>
<label for="password"> Password </label>
<input type="text" name="password"></input>
<button type="submit"> Register </button>
</form>
</div>
In your CSS
.form-container {
width: 300px;
height: 300px;
background-color: #fff;
}
I'm trying to make a color picker by setting up html like this:
<ol class="kleurenkiezer list-reset clearfix">
<li>
<input type="radio" id="kleur_wit" name="kleurenkiezer" value="wit">
<label for="kleur_wit" style="background: white;"></label>
</li>
<li>
<input type="radio" id="kleur_creme" name="kleurenkiezer" value="creme">
<label for="kleur_creme" style="background: #fffceb;"></label>
</li>
<li>
<input type="radio" id="kleur_lichtbruin" name="kleurenkiezer" value="lichtbruin">
<label for="kleur_lichtbruin" style="background: #968272;"></label>
</li>
<li>
<input type="radio" id="kleur_bordeauxrood" name="kleurenkiezer" value="bordeauxrood">
<label for="kleur_bordeauxrood" style="background: #941514;"></label>
</li>
<li>
<input type="radio" id="kleur_oudgroen" name="kleurenkiezer" value="oudgroen">
<label for="kleur_oudgroen" style="background: #7fa298;"></label>
</li>
<li>
<input type="radio" id="kleur_lichtblauw" name="kleurenkiezer" value="lichtblauw">
<label for="kleur_lichtblauw" style="background: #487eae;"></label>
</li>
<li>
<input type="radio" id="kleur_oudgeel" name="kleurenkiezer" value="oudgeel">
<label for="kleur_oudgeel" style="background: #b79130;"></label>
</li>
<li>
<input type="radio" id="kleur_zwart" name="kleurenkiezer" value="zwart">
<label for="kleur_zwart" style="background: #000;"></label>
</li>
</ol>
What I'm trying to do is make the actual radio button invisible to the user and make the label clickable so that I have a neat list of colored squares that you can select one of. Now my radio button doesn't seem to get checked.. Why would that be?
My css:
.kleurenkiezer {
width: 165px;
margin-left: -10px;
float: right;
}
.kleurenkiezer li {
position: relative;
width: 45px;
height: 45px;
margin: 0 0 10px 10px;
border: 1px solid #bbbbbb;
float: left;
}
.kleurenkiezer li input {
position: absolute;
top: 10px;
left: 10px;
z-index: 1000;
}
.kleurenkiezer li label {
position: absolute;
top: 0;
left: 0;
width: 43px;
height: 43px;
}
New answer for really old question.. :) Not sure it's your case, but I'm experimentind the same exact issue when clicking labels on a page where there are 2 duplicated forms, one of the 2 always hidden. One is used on a page area for mobile devices, the other for desktop devices.
The one appearing first on html flow is working properly, the other no. Fake example, see js fiddle:
<input type="radio" id="value-1" name="sort"/>
<label for="value-1">value 1</label>
<input type="radio" id="value-2" name="sort"/>
<label for="value-2">value 2</label>
<input type="radio" id="value-1" name="sort"/>
<label for="value-1">value 1</label>
<input type="radio" id="value-2" name="sort"/>
<label for="value-2">value 2</label>
https://jsfiddle.net/stratboy/8ua16gm3/1/
So for now, for me, the trick here is to find a way to avoid form duplication.
The radio button work for me.
You can set in css display:none for input checkbox:
.kleurenkiezer input[type=radio] {
display:none
}
For the same thing (a colorpicker) i used another approach and i think it's simpler. Just replace your form with a list of buttons and build 1 function where you pass the color. it's something like this:
<li class="color-box"><button type="button" class="color-btn" style="background-color:#BDC3C7;" onclick="wFontColour('#BDC3C7')"></button></li>
then in your function you do whatever you need to with that colour, in my case it looked like this:
function wFontColour(fontColour) {
document.execCommand("foreColor", false, fontColour);
};
if you want to keep your approach, give your label an id and try this:
$('#myLabel').each('click', function(){
$(this).closest('input:radio').attr('checked', 'checked');
});
Setting an attribute checked won't allow to re checked when you clicked once again. it will work for only once. Give following code a try
$(document).on('click','li label', function(){
$(this).closest('li').find('input:radio').trigger('click');
});
I experienced the same problem as #Luca (and possibly OP) using simple_form_for() in a mobile view and a desktop view. The mobile and desktop inputs had duplicate ids that were causing issues. I ended up using :namespace in the mobile view form:
<%= simple_form_for(:registration, namespace: "mobile") do |f| %>
The namespace generated ids that were unique and my radio buttons worked correctly after that.
I want to have two elements stay on the same row.
Right now I have this code:
<fieldset data-role="controlgroup" data-type="horizontal">
<label for="textinput">Text:</label>
<input type="text" id="textinput"/>
<input type="button" id="searchbutton" data-icon="search" data-iconpos="notext" onclick="function()"/>
</fieldset>
This works. The label, the input field and the button will all be on the same row as long as you view it in fullscreen in your computer browser. But if we make the window smaller, all three elements will be shown on one row each. Is there any way to make the label appear on one row, and the input field + button on the row below?
You need to override the jQM enhancements:
http://jsfiddle.net/E4EVT/10/
http://jsfiddle.net/E4EVT/36/ (Using the grid layout)
http://jsfiddle.net/E4EVT/42/ (Using the table layout)
JS
$('#textinput2').css('width','60%').css('display','inline');
HTML
<div>
<!-- use span instead of label -->
<span>Text:</span>
<input type="text" id="textinput2"/>
<br />
<input type="button" id="searchbutton2" data-icon="search" data-iconpos="notext" onclick="function()"/>
</div>
I think you might want to look into the grid layout jQM offers
http://jquerymobile.com/demos/1.0rc1/docs/content/content-grids.html
For Jquery Mobile 1.2.0
<div class="ui-grid-a" >
<div class="ui-block-a"><input type="text" /></div>
<div class="ui-block-b"><input type="text" /></div>
</div>
you need to add attribute data-inline="true" to the input elements.
CSS:
label {
display: block;
}
input {
padding: 2px;
width: 100px;
}
.wrap {
width: 212px; /* the width of twice your input (plus borders) */
}
And your HTML:
<fieldset data-role="controlgroup" data-type="horizontal">
<label for="textinput">Text:</label>
<div class="wrap">
<input type="text" id="textinput"/>
<input type="button" id="searchbutton" data-icon="search" data-iconpos="notext" onclick="function()"/>
</div>
</fieldset>
http://jsfiddle.net/ahallicks/BWsdk/
Edit:
Sorry, misread your question! If you want them all on the same line to start with use the following CSS:
label {
float: left;
margin-right: 12px;
}
input {
padding: 2px;
width: 100px;
}
.wrap {
float: left;
width: 212px; /* the width of twice your input (plus borders) */
}
http://jsfiddle.net/ahallicks/E4EVT/