Demo of My Problem
I want to select first two input elements.
.choicesDiv input[type="radio"]:nth-child(-n+2)
{
border: 1px solid yellow;
}
You need to wrap your radio buttons in another element like a label, you can't apply a border directly to a radio button.
See below.
Also, if your intent is to actually set the border of a radio button then you'll need to look into creating custom radio buttons with something like this tutorial: http://webdesign.tutsplus.com/articles/quick-tip-easy-css3-checkboxes-and-radio-buttons--webdesign-895. It's relatively easy, all you're doing is hiding the radio button and setting the background image of a label to your custom radio button style.
.qaDiv
{
width: 100%;
margin: 10px 0;
border: 1px solid red;
}
.choicesDiv
{
margin: 5px;
border: 1px solid green;
}
.choicesDiv label:nth-child(-n+2)
{
border: 1px solid yellow;
}
<div class="qaDiv" index="">
<div class="questionDiv">What is your name?</div>
<div class="choicesDiv">
<label><input type="radio" name="choices0" value="Gopi">Gopi</label>
<label><input type="radio" name="choices0" value="Gops">Gops</label>
<label><input type="radio" name="choices0" value="GopiNath">GopiNath</label>
<label><input type="radio" name="choices0" value="GopsAB">GopsAB</label>
</div>
<div class="answerDiv"></div>
<div class="explanationToggle"></div>
<div class="qButtons"></div>
</div>
Try changing the radio type to checkbox. You can only select one radio button, whereas you can select multiple checkboxes
.qaDiv
{
width: 100%;
margin: 10px 0;
border: 1px solid red;
}
.choicesDiv
{
margin: 5px;
border: 1px solid green;
}
.choicesDiv input[type="checkbox"]:nth-child(-n+2)
{
border: 1px solid yellow;
}
<div class="qaDiv" index="">
<div class="questionDiv">What is your name?</div>
<div class="choicesDiv">
<input type="checkbox" name="choices0" value="Gopi">Gopi
<input type="checkbox" name="choices0" value="Gops">Gops
<input type="checkbox" name="choices0" value="GopiNath">GopiNath
<input type="checkbox" name="choices0" value="GopsAB">GopsAB
</div>
<div class="answerDiv"></div>
<div class="explanationToggle"></div>
<div class="qButtons"></div>
</div>
Let me know if it helps :)
I don't know why border is not working, it's working with shadow
.choicesDiv input[type="radio"]:nth-child(-n+2)
{
box-shadow:0px 0px 0px 1px yellow;
}
Related
Edit: apparently cant use <> braces or it hides names?...
I've seen a few variations of this question asked, however none of what I found fits my particular issue, which I think is a simple issue. I am creating the following radio button group in react:
const myOptions = ["YTD", "Week", "Month", "Pre AS", "Post AS"]
const myButtons =
<form>
<div className="radio-group">
{myOptions.map((d, i) => {
return (
<label>
<input
type={"radio"}
value={myOptions[i]}
checked={timeframeNew === myOptions[i]}
onChange={this.handleTimeframeNewChange}
/>
<span>{myOptions[i]}</span>
</label>
)
})}
</div>
</form>;
and here is my current CSS for styling the buttons to look nice...
input[type=radio] {
position: absolute;
visibility: hidden;
display: none;
}
label {
color: #333;
background: #EEE;
display: inline-block;
cursor: pointer;
font-weight: bold;
padding: 5px 20px;
border: 2px solid orange;
}
input[type=radio]:checked + label {
color: red;
background: #333;
}
label + input[type=radio] + label {
border-left: solid 2px blue;
}
.radio-group {
border: solid 2px green;
display: inline-block;
margin: 20px;
border-radius: 10px;
overflow: hidden;
}
Unfortunately, the CSS is not working as intended. In particular, the following selection - input[type=radio]:checked + label does not work because there is no label immediately after an input. The only way so far I have been able to successfully get my react onChange handler function to work is by putting the input inside of the label, like this, and then returning the label in each .map loop.
*Since the return needs to be a single element, if I want to take the out of the label, I would need to then include them both in a div or a span, and for some reason doing so breaks my onChange handler...
So my question is, how how how can I, in CSS, grab the label that corresponds to the clicked input. I would like to change the entire label's color and background when it is / isn't clicked, so selecting the span does not help (since that only changes the texts color/background, not the whole label.
Thanks in advance!!
CSS can select child and sibling elements, but not parent elements. I often hide default radio buttons and checkboxes and create my own, like this:
.button-group{
font-size:0; /*Prevents a space from occuring between buttons*/
}
.button-group input{
position:absolute;
visibility:hidden; /* display:none causes some browsers to ignore the input altogether */
}
.button-group input+span{
display:inline-block;
line-height:20px;
font-size:1rem;
vertical-align:top;
padding:0 10px;
color:#000;
border-left:1px solid #a00;
}
.button-group label:first-child input+span{
border-radius:10px 0 0 10px;
border-left:0;
}
.button-group label:last-child input+span{
border-radius:0 10px 10px 0;
}
.button-group input:not(:checked)+span{
background-color:#faa;
}
.button-group input:not(:checked)+span:hover{
background-color:#f66;
}
input[type=radio]:checked+span{
background-color:#f33;
}
<div class="button-group">
<label>
<input type="radio" value="1" name="myfield" />
<span>Option 1</span>
</label>
<label>
<input type="radio" value="2" name="myfield" />
<span>Option 2</span>
</label>
<label>
<input type="radio" value="3" name="myfield" />
<span>Option 3</span>
</label>
</div>
*Since the return needs to be a single element, if I want to take the out of the label, I would need to then include them both in a div or a span, and for some reason doing so breaks my onChange handler...
You can use <React.Fragment> <input /> <span /> </ReactFragment> to return multiple elements without rendering them inside a div or span
Hi is it possible to add text inside check box replacing the tick icon.
I am could not achieve it with this code could someone suggest me how to make a size selection box with a text inside it
<ion-col>
<p>Choose the size</p>
<ion-item>
<ion-checkbox >S</ion-checkbox>
</ion-item>
</ion-col>
Help me to bring out this type of UI
You can hide the input and use the label to select the checkbox. Then style your label like in the example below, using :not(:checked) and :checked selectors. Same logic can be applied to radio buttons.
ul {
padding: 0;
margin: 0;
clear: both;
}
li{
list-style-type: none;
list-style-position: outside;
padding: 10px;
float: left;
}
input[type="checkbox"]:not(:checked),
input[type="checkbox"]:checked {
position: absolute;
left: -9999%;
}
input[type="checkbox"] + label {
display: inline-block;
padding: 10px;
cursor: pointer;
border: 1px solid black;
color: black;
background-color: white;
margin-bottom: 10px;
}
input[type="checkbox"]:checked + label {
border: 1px solid white;
color: white;
background-color: black;
}
<ul>
<li>
<input type="checkbox" id="check_1" name="check_1" value="check_1">
<label for="check_1">S</label>
</li>
<li>
<input type="checkbox" id="check_2" name="check_2" value="check_2">
<label for="check_2">M</label>
</li>
<li>
<input type="checkbox" id="check_3" name="check_3" value="check_3">
<label for="check_3">L</label>
</li>
<li>
<input type="checkbox" id="check_4" name="check_4" value="check_4">
<label for="check_4">XL</label>
</li>
</ul>
Updated
check updated demo here
Add the following Js to get the relevant radio value
JS:
$("body").on("click", "label", function(e) {
var getValue = $(this).attr("for");
var goToParent = $(this).parents(".select-size");
var getInputRadio = goToParent.find("input[id = " + getValue + "]");
console.log(getInputRadio.attr("id"));
});
I assume that the user select only one size at a time. if user can select the multiple size modify the example with checkbox.
Try this
Check Demo here
HTML:
<div class="select-size">
<input type="radio" name="s-size" id="small" checked/>
<input type="radio" name="s-size" id="medium" />
<input type="radio" name="s-size" id="large" />
<input type="radio" name="s-size" id="x-large" />
<input type="radio" name="s-size" id="xx-large" />
<label for="small">S</label>
<label for="medium">M</label>
<label for="large">L</label>
<label for="x-large">XL</label>
<label for="xx-large">XXL</label>
</div>
CSS:
.select-size input{
display: none;
}
label {
display: inline-block;
width: 50px;
height: 50px;
text-align: center;
border: 1px solid #ddd;
line-height: 50px;
cursor: pointer
}
#small:checked ~ label[for="small"],
#medium:checked ~ label[for="medium"],
#large:checked ~ label[for="large"],
#x-large:checked ~ label[for="x-large"],
#xx-large:checked ~ label[for="xx-large"] {
background: #999;
color: #ffffff;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I need style required fields, but I need show style only when user click first time, and then it does not click, I would like to keep with the default color.
With effect of click first form, but with css of second form, result of box 3:
http://jsfiddle.net/rflfn/m0f6xuxd/
Note: the red box-shadow is default color of browser for tag required of HTML5 (I am not using any script).
<div class="test1">box 1<br>Appear box-shadow only on click
<br>(default browser color)
<br>show on 3 input at same time (all required fields).
<form action="#">
<input type="text">
<input type="text" required>
<input type="text" required>
<input type="text">
<input type="text" required>
<input type="text">
<input type="text">
<input type="submit" text="Send">
</form>
</div>
<div class="test2">box 2<br>Have CSS, but I need show color only when click (use standard formatting until it is clicked)
<form action="#">
<input type="text">
<input type="text" required>
<input type="text" required>
<input type="text">
<input type="text" required>
<input type="text">
<input type="text">
<input type="submit" text="Send">
</form>
</div>
<div class="test3">box 3<br>I need style all required fields with my own css (show on 3 input at same time, not only on focus input)
<form action="#">
<input type="text">
<input type="text" required>
<input type="text" required>
<input type="text">
<input type="text" required>
<input type="text">
<input type="text">
<input type="submit" text="Send">
</form>
</div>
.test1, .test2, .test3 {
width: 230px;
padding: 5px;
margin: 5px;
border: 1px solid red;
display: inline-block;
vertical-align: top;
}
form {
margin: 20px;
}
form * {
display: block;
clear: both;
margin: 10px;
}
.test2 :required {
border: 1px solid #FFF;
border-radius: 3px;
}
.test2 :required:valid {
background-color: #E8FFED;
box-shadow: 0 0 3px 1px #00EA33;
}
.test2 :required:invalid {
background-color: #FFEEEE;
box-shadow: 0 0 3px 1px #EA2034;
}
.test3 input[type="text"] {
border: 1px solid #D1D1D1;
border-radius: 3px;
}
.test3 :required {
box-shadow: none;
}
.test3 :required:focus {
border: 1px solid #FFF;
background-color: #FFEEEE;
box-shadow: 0 0 3px 1px #EA2034;
}
.test3 :required:valid {
background-color: #E8FFED;
box-shadow: 0 0 3px 1px #00EA33;
}
EDIT: No classes needed.
You can use general sibling combinator. The only problem is it will not work for elements above the one you click on. To go further you will need Javascript.
jsfiddle
Key part:
input:required:focus~input:required, input:required:focus {
border: 1px solid #FFF;
background-color: #FFEEEE;
box-shadow: 0 0 3px 1px #EA2034;
}
In the example below:
I want the textbox to fill all available space. The problem is the dropdown width cannot be fixed, since its elements are not static. I would like to solve this with just css (no javascript if possible).
I have tried the solutions proposed to similar questions without any luck :(
Here is the fiddle: http://jsfiddle.net/ruben_diaz/cAHb8/
Here is the html:
<div id="form_wrapper">
<form accept-charset="UTF-8" action="/some_action" method="post">
<span class="category_dropdown_container">
<select class="chosen chzn-done" name="question[category_id]" id="selQJK">
<option value="1">General</option>
<option value="2">Fruits</option>
<option value="3">Ice Creams</option>
<option value="4">Candy</option>
</select>
</span>
<span class="resizable_text_box">
<input id="question_text_box" name="question[what]" placeholder="Write a query..." type="text" />
</span>
<input name="commit" type="submit" value="Ask!" />
</form>
</div>
And here the css:
#form_wrapper {
border: 1px solid blue;
width: 600px;
padding: 5px;
}
form {
display: inline-block;
width: 100%;
}
.category_dropdown_container {
}
.resizable_text_box {
border: 1px solid red;
}
input[type="text"] {
}
input[type="submit"] {
background-color: lightblue;
width: 80px;
float: right;
}
Updated demo (tested fine in IE7/8/9/10, Firefox, Chrome, Safari)
Float the left and right elements.
In the HTML source code, put both of the floated elements first (this is the most important part).
Give the middle element overflow: hidden; and an implict width of 100%.
Give the text box in the middle element a width of 100%.
.category_dropdown_container {
float: left;
}
input[type="submit"] {
float: right;
...
}
.resizable_text_box {
padding: 0 15px 0 10px;
overflow: hidden;
}
.resizable_text_box input {
width: 100%;
}
<div class="category_dropdown_container">
<select class="chosen chzn-done" name="question[category_id]" id="selQJK">
...
</select>
</div>
<input name="commit" type="submit" value="Ask!" />
<div class="resizable_text_box">
<input id="question_text_box" name="question[what]"
placeholder="Write a query..." type="text" />
</div>
The relatively recent 'flex' display css property solves this problem for you:
All you need to do is change form's display to inline-flex, give .resizable_text_box flex-grow: 100; and give #question_text_box width: 100%
Full example from the OP:
<style>
#form_wrapper {
border: 1px solid blue;
width: 600px;
padding: 5px;
}
form {
display: inline-flex;
width: 100%;
}
.category_dropdown_container {
}
.resizable_text_box {
border: 1px solid red;
flex-grow: 100;
}
#question_text_box {
width: 100%
}
input[type="text"] {
}
input[type="submit"] {
background-color: lightblue;
width: 80px;
float: right;
}
</style>
<div id="form_wrapper">
<form accept-charset="UTF-8" action="/some_action" method="post">
<span class="category_dropdown_container">
<select class="chosen chzn-done" name="question[category_id]" id="selQJK">
<option value="1">Options</option>
</select>
</span>
<span class="resizable_text_box">
<input id="question_text_box" name="question[what]" placeholder="Write a query..." type="text" />
</span>
<input name="commit" type="submit" value="Ask!" />
</form>
</div>
Flex-box lets you do what you wanted to do with css for 15 years - its finally here! More info: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Change some of those <span> elements to <div> elements; then float:left the division around your dropdown; then give the one of the right an overflow:hidden and the input element inside it a width:100%;.
Here's an example. Here it is again with a bigger drop down.
Except that screws up the submit button. So give the #form_wrapper non-static positioning (position:relative) and position the submit button absolutely. See this fiddle and this one.
I'm trying to get a garish red border around some radio buttons, but it is not showing up in Firefox latest or Chrome latest. Work fine in IE9/IE8.
Each of the input element on my form that are required has a data-val-required attribute put in by MVC3. All browsers puts in the red borders just dandy when we have a text or textarea inputs, but am struggling with the radio button. For IE, it works, but other browsers won't put the red border around it.
css:
input[data-val-required], select[data-val-required], textarea[data-val-required]
{
background-color: #F0FFFF;
border: 1px solid red;
}
view-source:
<label for="WaiveSelect">Do you waive confidentiality?</label><br />
<input data-val="true" data-val-number="The field WaiveSelect must be a number." data-val-required="Please select waive." id="WaiveSelect" name="WaiveSelect" type="radio" value="0" /> No, I do not waive confidentiality<br />
<input id="WaiveSelect_2" name="WaiveSelect" type="radio" value="2" /> Yes, I waive confidentiality<br />
<input id="WaiveSelect_3" name="WaiveSelect" type="radio" value="3" /> Yes, I waive confidentiality except to the client<br />
<span class="field-validation-valid" data-valmsg-for="WaiveSelect" data-valmsg-replace="true"></span>
What it looks like in IE (Firefox and Chrome shows no borders):
input[type=radio]{
outline: 1px solid red
}
I know this is four years old, but I came up with a nice solution using CSS Pseudo elements.
My requirement was to highlight an unchecked checkbox, or radio button in validation.
<input type="radio" class="required" name="radio1"/>
/* Radio button and Checkbox .required needs an after to show */
input[type=radio].required::after, input[type=checkbox].required::after {
display: block;
width: 100%;
height: 100%;
background: transparent;
content: '';
border: 2px solid red !important;
box-sizing: border-box;
}
/* Radio buttons are round, so add 100% border radius. */
input[type=radio].required::after {
border-radius:100%;
}
You could accomplish by wrapping each input element with div tag and give it a border and a float left... like this:
<div style="border:1px solid red;float:left">
<input type="radio".. />
</div>
No, I do not waive confidentiality
Not all browsers support borders around radio buttons and checkboxes. I voted for a bug years ago to have this included in Gecko but so far they haven't implemented it.
This may help you:
.style {
border: 1px solid red;
width: 20px;
height: 20px;
text-align: center;
margin-top: 2px;
background-color: #f0ffff;
}
<div class="style">
<input type="radio" />
</div>
<div class="style">
<input type="radio" />
</div>
<div class="style">
<input type="radio" />
</div>
<div class="style">
<input type="radio" />
</div>
View on JSFiddle
Complete code using jquery
https://jsfiddle.net/xcb26Lzx/
$(function(){
$('.layer').css('border',0);
$('input:radio').change(
function(){
if ($(this).is(':checked')) {
$('.layer').css('border','1px solid red');
}
});
});
Try this...
Put a div around the input and assign a class to the div like so:
<div class="custom"><input type="radio"></div>
Then open your custom css file and add this CSS
.custom {border: 1px solid red; border-radius: 30px; padding: 3px 3px 0 3px; background: red;}
This should create a nice red border around the radio button. If you're using a check box you would simply remove the border-radius: 30px from the css. Depending you may need to play with the padding a bit to center the button, but this worked for me.
Edit: You will also want to assign the following CSS to the div so it lines up correctly.
.custom {display: inline;}
fiddle link