http://jsfiddle.net/leongaban/6vwLetd6/13/
I have a custom sign up form with styles from a Codrops demo page.
Basically on hover I want to animate the label text (have it fade in and out) but for now just trying to get the text to change color to red:
.input__label-content--jiro:hover {
color: red !important;
}
<span id="full_name_label" class="input input_jiro">
<input class="input__field input__field--jiro" type="text" id="input-1" />
<label class="input__label input__label--jiro" for="input-1">
<span class="input__label-content input__label-content--jiro">
Full Name
</span>
</label>
</span>
However when you hover over "Full Name" the color doesn't change. Can you see what is blocking the hover effect?
I've removed pointer-events: none declaration and it works.
Take a look at JSFiddle.
So I think You only need to overwrite this one according to auto value => Docs
Is this what You want??
Related
I've some radiobuttons: Good, Better and Best.
I want to change its appearance to a rectangle button.
Like this:
Codepen:
https://codepen.io/ogonzales/pen/dyvvjgx
Code:
<div class="fps-budget" data-fps-budget="good">
<input id="fps_good" type="radio" name="budget" value="good" class="visually-hidden">
<label for="fps_good">
<img data-fps-budget-img="" src="//cdn.shopify.com/s/files/1/0408/5792/7834/files/Good_29ea1531-4b74-4ead-be87-8f053f8efc96_320x140.jpg?v=1601266077" alt="Good.">
<span class="h3">Good.</span>
</label>
</div>
CSS you can put this.
input[type=“radio”] {
display: “none”
}
Then you can change the style of the label.
I am using wordpress to maintain a website. I would like to create a page with a few icons and a text box at the bottom. Depending on what icon is clicked, the text in the box underneath changes. Does anyone know a way to d this using basic html and css?
This is possible with hidden checkboxes. And a little hack.
Use the CSS sibling selector. This changes your styles on elements that are siblings on your checkbox. If the checkbox get's the pseudo-class :checked your text will change.
Try this out:
<input type="checkbox">
<p class="to-be-changed">Some Text.</p>
.to-be-changed {
color: black;
}
input[type=checkbox]:checked ~ .to-be-changed {
color: red;
}
it's only possible for custom script
$('#two').click(function(){
$('#count').val('2');
$('#total').text('Product price: $1000');
});
$('#four').click(function(){
$('#count').val('4');
$('#total').text('Product price: $2000');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="button" id ='two' onclick="change()" value="2
Qty">
<input type="button" id ='four' class="mnozstvi_sleva" value="4
Qty">
<br>
Total <input type="text" id="count" value="">
What exactly determines how the input is focused on a <label>? In principle, wrapping a radio <input> in a <label> ensures that you can click anywhere on the label text to select the radio button:
<label>
<input name="foo" type="radio">Fubar
</label>
However, this doesn't work if the label text is more complex. The code below is FireBug output for two radio buttons, where one of them has a Bootstrap popover when hovering over the text.
The second button (Bar) is manually-entered HTML, which works as expected (clicking on 'Bar' selects the radio).
The first button (Foo) has no label text in the original HTML, and everything in the <a ...>Foo</a> is inserted by JavaScript, to give a popover with a title and some text. The problem is that this radio button can only be selected by clicking on the button itself, and not by clicking on the text. The class override-link just turns off link styling (default colour and pointer, no decoration).
Any idea how to expand the focus area for the first button to the entire 'Foo' text?
<div class="radio">
<label id="FooLabel">
<input id="pg29Radio0" name="pg29Radio" value="0" checked="checked" type="radio">
<a class="override-link" title="" rel="popover" data-toggle="popover"
data-content="<div style='font-weight:normal'>
Foo popover body text</div>"
href="#" data-original-title="<div style='font-weight:bold; white-space:nowrap'>
Foo popover title text</div>">
Foo
</a>
</label>
</div>
<div class="radio">
<label id="BarLabel">
<input id="pg29Radio1" name="pg29Radio" value="1" type="radio">
Bar
</label>
</div>
EDIT
jsfiddle showing the problem. This shows two radio buttons, with a Bootstrap popover when hovering over the 'Foo' text. You can select the 'Bar' radio by clicking on the 'Bar' text, but you can't do this for 'Foo'.
The <label> element should actually wrap only the text (and not the input) and you should use the for="id" in the label (to let the browser know that this label is the the element with the id="id".
The problem that you have is that the <a> element "takes over" the click from the label element. You can use the pointer-events css property on the label a to prevent that a to take over it:
label a {
pointer-events: none;
}
<div class="radio">
<input id="pg29Radio0" name="pg29Radio" value="0" checked="checked" type="radio" />
<label for="pg29Radio0" id="FooLabel">
<a class="override-link" title="" rel="popover" data-toggle="popover"
data-content="<div style='font-weight:normal'>
Foo popover body text</div>"
href="#" data-original-title="<div style='font-weight:bold; white-space:nowrap'>
Foo popover title text</div>" onclick="this.parent.click();">
Foo
</a>
</label>
</div>
<div class="radio">
<input id="pg29Radio1" name="pg29Radio" value="1" type="radio" />
<label for="pg29Radio1" id="BarLabel">
Bar
</label>
</div>
Note that if you expect the click on the a to open some modal/run some javascript code - this will prevent it.
update
Since you already use javascript you can use this:
onclick="this.parentElement.click()"
On the anchor.
Here is a jsfiddle, based on the one in your comment:
https://jsfiddle.net/2pumb4yy/2/
I am attempting to utilize the bootstrap "form-control" class on a checkbox within a label tag so that clicking the text also checks the textbox.
Here is the JSFiddle: https://jsfiddle.net/vpm13m2b/
The HTML for the control is:
<div class="form-group">
<div>
Attempt #1
<span class="red">*</span>
</div>
<label>
<input type="checkbox" class="form-control" /> Yes
</label>
</div>
<div class="form-group">
<div>
Attempt #2
<span class="red">*</span>
</div>
<label class="checkbox-inline">
<input type="checkbox" class="form-control" /> Yes
</label>
</div>
With attempt 1, the "Yes" text is pushed to a separate line. With attempt 2, the checkbox and underlying controls are pulled the width of the page, which also pushes the "Yes" text to the second line. The screenshot of this is below:
Here's what I am trying to do:
The styled checkbox is displayed next to the "Yes"
Selecting the text also selects the checkbox
Keep the solution clean (trying to avoid dealing with float:left or jquery click events on the text to check the checkbox)
It just seems that there has to be a vanilla way to do this. All the bootstrap docs just show standard checkboxes - nothing with the form-control class styling the checkbox for their nice inline examples.
Remove the class="form-control" from your checkboxes. As the bootstrap docs state:
All textual <input>, <textarea>, and <select> elements with
.form-control are set to width: 100%; by default.
jsFiddle example
The .form-control class has about a dozen properties being set that you most likely don't want or need.
Here's what I came up with to fix my issue. I need to retain the .form-control class on the checkbox element so that the checkbox control is styled by the bootstrap theme. My busines requirement is to use the themed, not default browser, checkbox.
See working JSFiddle here: https://jsfiddle.net/vpm13m2b/3/
input[type=checkbox].form-control {
width: 25px;
height: 25px;
display: inline-block;
vertical-align: -8px;
}
The css above was added into my site's stylesheet so that the form-control checkboxes retain the style, and I don't have to change the existing code that has a label containing the checkbox and caption to the right of the checkbox vertically centered.
This works with my original attempt (#1) on the html below:
<div class="form-group">
<div>
Attempt #1
<span class="red">*</span>
</div>
<label>
<input type="checkbox" class="form-control" /> Yes
</label>
</div>
The resulting output matches what I'm looking for in the original question:
If I have a html form like the following:
<form name="statusForm" action="post.php" method="post" enctype="multipart/form-data">
Test:
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
TestTestTest:
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
TestTestTestTestTestTest:
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
TestTestTestTestTestTestTestTestTestTestTest:
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
<input name="Submit" value="submit" type="submit">
</form>
Is it possible to align the checkboxes so they are in union, without using a table or css but pure html? Otherwise, which css should be used?
Yup. Surround each label with a <label> tag:
<label for="checkboxes1">Test:</label>
<input id="checkboxes1" name="checkboxes[]" value="Test" type="checkbox">
Then give the label a width:
label {
display: inline-block; /* try "block" instead if this fails in IE */
min-width: 5em;
}
That should pad out the text boxes nicely. As an added bonus, clicking on the label should now place the browser focus into the textbox.
The article Applying CSS to forms has some examples of syling labels to cause inputs to the right to line up along a vertical edge.
That said, it is a convention in user interface design to place labels to the right or radio buttons and checkboxes. If you follow that convention, then they will line up by themselves (since all the checkboxes will share a width).
You could just put your labels and inputs in an unorderded list. In order to get the alignment, the text would have to go on the right of the input/
<ul>
<li>
<label><input /> Some Text</label>
</li>
</ul>
or
<ul>
<li>
<input /><label for="">Some Text</label>
</li>
</ul>
Rich
The simplest way would simply be to align them all to the right. I'm not sure if the "align" attribute works on the form element but you could try that, or wrap your code in a div or p element with align="right").
CSS is a better solution. Put a class on the form then use the CSS rule text-align: right; or simply add style="text-align: right" to the form element directly.
I don't see why you want to do that.
It doesn't meet your no css instruction, but you could use inline styles if you really just want no external css.
Perhaps you could use
CSS (and to a lesser extent- tables) are tools you are looking for.
Edit: Another way you could do this is with ghost pixel images. images that are a 1x1 alpha transparent png and you use the height and width attributes in to tell it how much you want to space. You'd might need some inline css to make sure things clear correctly.