Sun, 2013-10-20 06:36
Will ::before work with this drop down list?
<div class="control-group custom "><label for="ticket[c_division]" title="Division">Division:</label><div class="controls"><select id="ticket_c_division" name="ticket[c_division]"><option value=""></option> <option value="Example 1">Example 1</option> <option value="Example 2">Example 2</option> <option value="Example 3">Example 3</option> <option value="Example 4">Example 4</option> <option value="Example 5">Example 5</option> <option value="Example 6">Example 6</option> <option value="Example 7">Example 7</option> <option value="Example 8">Example 8</option></select></div></div>
I'd like text to display on the left of each. Something equivalent to "click here to select"
I'm using the following to hide each instance of these so that the .js file displays the drop down list properly however it's missing labels on the side of it. I'm thinking something like ::before would work.
.control-group.custom:nth-of-type(1) { position: absolute; top: -9999px; left: -9999px; }
Sun, 2013-10-20 06:39
#1
i don't see an edit button
i don't see an edit button but I wanted to clarify that I didn't want the label to appear until the matching ID is selected.
Sun, 2013-10-20 07:16
#2
Or Is there a way to write
Or Is there a way to write the following so that the label that I'm hiding just shows up again when the id is selected?
.control-group.custom:nth-of-type(1)
{
position: absolute;
top: -9999px;
left: -9999px;
}
Sun, 2013-10-20 08:43
#3
possibly something like
possibly something like this?
.control-group.custom:nth-of-type(1)::before {content: attr(Example 1) "Click to Select..";}
Mon, 2013-10-21 00:25
#4
Can you show us a working
Can you show us a working example of how far you have got?
I'm having difficulty understanding what you want.
Mon, 2013-10-21 01:52
#5
It's behind a firewall or i
It's behind a firewall or i would.
see attached for element info.
Label is visible on the parent but not on the child. It's visible before I hide it of course with
.control-group.custom:nth-of-type(1)
{
position: absolute;
top: -9999px;
left: -9999px;
}
But I need it to be hidden until it's selected and then show up.
| Attachment | Size |
|---|---|
| Capture.PNG | 9.28 KB |
Mon, 2013-10-21 03:22
#6
Here's the jsfiddle version
Here's the jsfiddle version of it.
drop down doesn't work on this site though but it should give you a clearer version of what I'm looking at.
Mon, 2013-10-21 13:40
#7
The .js file /** CONVERT CSV
The .js file
/** CONVERT CSV LIST OF FORM FIELDS INTO AN ARRAY OF DOM OBJECTS */
/** The Document Object Model (DOM) is a programming interface for HTML
and XML documents. It provides a structured representation of the document
(a tree) and it defines a way that the structure can be accessed from programs
so that they can change the document structure, style and content.
The DOM provides a representation of the document as a structured group of
nodes and objects that have properties and methods. Essentially, it connects
web pages to scripts or programming languages. Though often accessed using
JavaScript, the DOM is not part of it and it can be used by other languages,
though this is much less common.*/