What I am trying to do is have a lot of cards displayed on the screen. When you click them, they should rotate and change their color.
The problem I have is that no matter which card I click, only the first one changes, instead of the one being clicked.
Here is a fiddle:
http://jsfiddle.net/GZ8zr/2/
html:
<body>
<div class="pane">
<input type="checkbox" id="button">
<label class="card" for="button"></label>
<input type="checkbox" id="button">
<label class="card" for="button"></label>
<input type="checkbox" id="button">
<label class="card" for="button"></label>
<input type="checkbox" id="button">
<label class="card" for="button"></label>
</div>
</body>
css:
input
{
width:100px;
height:100px;
display:none
}
.card
{
width:100px;
height:100px;
background:red;
display:block;
transition: background 1s, -webkit-transform 1s;
}
input:checked +.card
{
background:blue;
-webkit-transform: rotateX(180deg);
}
thanks
Your problem is you're using the same ID on the three inputs and labels. As per W3C spec, IDs must be unique on a page. And that's what the for attribute is expecting. So change your code to look like this:
http://jsfiddle.net/GYatesIII/GZ8zr/4/
You have the same id "button" three times. Therefore - at least on my browser and presumably yours too - each label is for the first checkbox. AFAIK this behavior is also undefined, since the standard expects unique ids for any given page (see below).
This fork of your fiddle with the display:none removed for the checkboxes demonstrates that clicking on any of the labels causes the first checkbox to be toggled.
This fiddle, on the other hand, demonstrates your code working properly when the ids are unique.
Also note that the HTML standard specifies that ids must be unique:
id = name [CS]
: This attribute assigns a name to an element. This name must be unique in a document.
The problem is that your inputs and labels are all targeting just the first input tag - which is incorrect. Here is a working demo: http://jsfiddle.net/GZ8zr/6/
If your input has id "button", then no other inputs can have that id. Even if you do that, the first input checkbox will be checked - html itself enforcing that there is just one unique ID every html page.
HTML:
<div class="pane">
<input type="checkbox" id="button1">
<label class="card" for="button1"></label>
<input type="checkbox" id="button2">
<label class="card" for="button2"></label>
<input type="checkbox" id="button3">
<label class="card" for="button3"></label>
<input type="checkbox" id="button4">
<label class="card" for="button4"></label>
</div>
</body>
All cards must have a unique identifier. You are clicking on a card and CSS is running on the first thing that the class is applied to (in this case the first card). I would use jquery to select the specific card you want the class applied to -> $(this). Hope that helps.
Related
<s:checkboxlist list="fruits" name="selectfruits" listKey="id" listValue="description" id="fruitsid">
Suppose I have the above checkboxlist that contains multiple checkboxes. I would like to change the background color to grey and the color of the label to white when the mouse hovers upon the respective checkbox or its label. How would I achieve this by changing its style in the css?
I tried the following in the css file by referring the checkboxlist's id but it does not work:
#fruitsid:hover {
color:white;
background-color:grey;
}
The generated HTML for the above code:
<input type="checkbox" name="selectfruits" value="Apple" id="selectfruits-1">Apple
<br/><br/></input>
<input type="checkbox" name="selectfruits" value="Melon" id="selectfruits-2">Guava
<br/><br/></input>
<input type="checkbox" name="selectfruits" value="Orange" id="selectfruits-3">Orange
<br/><br/></input>
<input type="checkbox" name="selectfruits" value="Guava" id="selectfruits-4">Grapefruit
<br/><br/></input>
<input type="checkbox" name="selectfruits" value="Pineapple" id="selectfruits-5">Melon
<br/><br/></input>
Is there any way where you can refer each label and change its css style like the one mentioned above?
Thanks!
You can use CSS3 startswith selector:
input[id^="selectfruits"]:hover{
/* your custom style here */
}
BTW checkboxes (and radiobuttons too) are special items, rendered differently basing on Browser / Operative System, and hard to style with CSS only.
The snippet above is correct to target an item (even a checkbox or a radiobutton), but the problem is that then you can't do what you ask. You could change the size or the position, for example, but not the color / background-color, because they don't have those properties.
There are several solutions to this, but the two most famous are:
Hiding the real checkbox and then showing another element (a span with an image, usually):
This is used when a crossbrowser/cross-OS rendering is mandatory, and/or when there is the need to show a better / different graphical object (I've used checkboxes with lock/unlock symbols, for example). But I guess it's not your case.
Wrapping the checkbox in another element (eg. a div) and then styling that element:
this appears to be your case. There is no need to wrap it in a div, btw, a label element next to the checkbox is enough for your case. The problem is that <s:checkboxlist/> tag is generating the HTML for you, without the labels, then you should avoid using this tag in order to be able to add your custom HTML;
change your tag with single checkboxes tags generated inside an iterator... or just with plain HTML elements, to keep it simple:
<s:iterator value="fruits" status="ctr">
<input type="checkbox"
name="selectfruits"
class="chkFruits"
value="<s:property value='%{id}'/>"
id="selectfruits-<s:property value='%{#ctr.count}'/>">
<label for="selectfruits-<s:property value='%{#ctr.count}'/>" class="lblFruits">
<s:property value='%{description}'/>
</label>
<br/><br/>
</s:iterator>
that will generate the following output, that you can style with standard selectors:
.chkFruits:hover + .lblFruits {
background-color: blue;
color: white;
}
<input type="checkbox" name="selectfruits" value="AWARD"
id="selectfruits-1" class="chkFruits" />
<label for="selectfruits-1" class="lblFruits">Apple</label>
<br/><br/>
<input type="checkbox" name="selectfruits" value="CLIST"
id="selectfruits-2" class="chkFruits" />
<label for="selectfruits-2" class="lblFruits">Guava</label>
<br/><br/>
<input type="checkbox" name="selectfruits" value="HAN"
id="selectfruits-3" class="chkFruits" />
<label for="selectfruits-3" class="lblFruits">Orange</label>
<br/><br/>
<input type="checkbox" name="selectfruits" value="POS"
id="selectfruits-4" class="chkFruits" />
<label for="selectfruits-4" class="lblFruits">Melon</label>
<br/><br/>
This answer works for all check in my webpages!
input[type="checkbox"]:hover + label {
color: #fff;
border-color: #1b7aa9;
background-color: #239fdb;
}
I want to have some text on a row, followed by an input box on the same row.
However, the input box is always going to the next row, even though there's enough space for it on same row as the text. I looked in the documentation, and there is only advice there to do what I want for forms (i.e class form-horizontal).
However, I just want some text (<p> tag) and then an input box.
See simple JSFiddle
http://jsfiddle.net/dz089gac/1/
<div class="container">
<div class="row">
<p>Hi</p>
<input type="text" placeholder="hi">
</div>
</diV>
Use below code:
<div class="container">
<div class="row">
<span>Hi</span>
<input type="text" placeholder="hi">
</div>
</diV>
Use span instead of p tag as p creates block of element and place a new line after the tag close.
This is because the p is a block element and the next element will start on a new line.
If you can not change the element type or move the input into the p tag then you can use css to make the p element inline.
.row p{
display:inline-block;
}
http://jsfiddle.net/dz089gac/3/
A paragraph (p) is a block-level element. That means it takes up the entire "row" it is on.
You should strongly consider using a label (label) instead, which is more semantically correct in this context and, as such, provides a few benefits:
<div class="container">
<div class="row">
<label for="my_input_element">Hi</label>
<input type="text" placeholder="hi" id="my_input_element">
</div>
</diV>
Clicking on the label will set the focus on the corresponding input element, and screenreaders (and other devices) recognize that the label is associated with the input, rather than a block of unrelated text. This is exactly what a label is INTENDED to be used for.
fiddle: http://jsfiddle.net/s62evwmz/
Put inside the paragraph.
<p>Hi <input type="text" placeholder="hi"></p>
But that is much more better, if you are using labels instead of p
<label>Hi <input type="text" placeholder="hi"></label>
I don't know if this is what you want, but i have put the input type into the </p> tag.
Updated fiddle here
just put the input inside the <p></p>
e.g.
<div class="container">
<div class="row">
<p>Hi <input type="text" placeholder="hi"></p>
</div>
</diV>
fiddle
You can set the display property of <P> tag to the inline-block value i.e. display=inline-block and if required you can give some margin for the Box this will add space between them.
ie .
<div class="container">
<div class="row">
<p style="display:inline-block;">Hi</p>
<input type="text" placeholder="hi" >
</div>
</diV>
Demo Link : http://jsfiddle.net/dz089gac/10/
I have html code that I cannot change.
I cannot use JS for help. So the only option is CSS. example here:
https://jsfiddle.net/4gKPL/
HTML:
<!-- code for input -->
<div class="form-group complete">
<label>label for text input</label>
<input type="text"/> <span class="error-message">This is an error message</span>
</div>
<!-- code for dropdown -->
<div class="form-group complete">
<label>label for select input</label>
<div class="custom-selectbox custom-selectbox-form">
<select name="sth" required>
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
</select> <span class="selectedValue"> </span>
<span class="is-visually-hidden">select to open the list</span>
</div> <span class="error-message">This is an error message</span>
</div>
CSS:
.complete:after {
content:'OK';
}
I need to display additional content (in this example 'OK') for input fields but not for select.
Spans after interactive components are optional so don't have to exist.
Any idea about how define this selector?
Since you can't use :after on input elements, all I can think of is a really hackish solution: select the element following and insert a :before pseudo element in front of it.
.complete input[type="text"] + .error-message:before {
content:'OK';
}
See this jsFiddle for a working example.
EDIT
The .error-message element's not always being present throws a wrench in this plan. You can make an unprefixed call to :before (+ :before), but then if the following element is hidden in some way, so will your OK message. And even if it is present, it picks up the styles of the element following. See this updated jsFiddle.
I'll leave this idea up so people can see it, but it doesn't look like it will work for your purposes.
I have a problem with the automatic layout of jquery mobile:
i have a form with fieldsets:
<div data-role="collapsible" data-collapsed="false" data-theme="a">
<h3>Test</h3>
<div data-role="fieldcontain">
<label for="TextInput"> Textinput </label>
<input type="text" name="TextInput" id="TextInput">
</div>
<div data-role="fieldcontain">
<label for="ButtonInput"> Button </label>
<a href="javascript:alert('works')" data-icon="arrow-r" data-role="button" data-iconpos="right">
<label id="ButtonInput" name="ButtonInput"> Testvalue </label>
</a>
</div>
</div>
On Displays with a lower resolution everything work fine. The labels are shown in the first row, the inputs are shown in the second row:
Textinput
[Inputbox]
Button
[Button]
On Displays with a higher resolution, the input field and the label are shown in 1 row
Textinput [InputBox]
but the Button is still shown in 2 Rows:
Button
[Button]
Anyone knows the problem?
This is not an error, jQM was build to act like that.
If you want to fix it just use this simple css:
#TextInput {
width: 100% !important;
}
working example: http://jsfiddle.net/Gajotres/xrVU2/
How can I align button right next to my input text. Example here
HTML
<div id="frm">
<label>Select an Item:
<input type="text" /><input type="button" value="..." class="open">
</label>
<label>Price:<input type="text" /></label>
CSS
#frm label
{
display:block;
float:left;
padding-right:6px;
}
#frm input
{
display:block;
}
Edit
I want my form elements horizontally aligned in blocks & I like the popup button to align with just one textbox.
I'd suggest to move the <input> outside the <label>, like this:
<div id="frm">
<div class="group">
<label for="item">Select an Item:</label>
<input type="text" id="item" />
<input type="button" value="..." class="open">
</div>
<div class="group">
<label for="price">Price:</label>
<input type="text" id="price" />
</div>
</div>
If you want to separate the inputs from the label, you should place the label text inside an own element, and not mix label text and input into a common tag.
Then, you can use the following CSS:
#frm .group {
display: block;
float: left;
padding-right: 6px;
}
#frm label {
display:block;
}
See how it looks like, is this what you want?
-Easiest way to solve your problem, is to remove all CSS - input is inline by default, so it won't wrap to the next line if you add no CSS.
-And I'd add an extra div to make sure your fields are on seperate lines, no CSS needed either.
Like this:
<div id="frm">
<div class="field">
<label>Select an Item:</label>
<input type="text"><input type="button" value="..." class="open">
</div>
<div class="field">
<label>Price:</label>
<input type="text">
</div>
</div>
http://jsfiddle.net/ckfZE/15/
http://jsfiddle.net/ckfZE/18/
added a span-tag though
This CSS is causing that conflict:
#frm input {
display:block;
}
You could set .open to display:inline to fix this.
Be a little more specific with your question. If you took the CSS out completely they would be aligned right next to each other. If you want them on separate lines add a <br/> after the text input.