I need to set a honeypot section of a side form to display:none but for some reason my CSS adjustments would not work. The elements involved are these (as shown when inspected via Firebug):
<li id="field_9_9" class="gfield gform_validation_container field_sublabel_below field_description_below">
<label class="gfield_label" for="input_9_9">Phone</label>
<div class="ginput_container">
<input id="input_9_9" type="text" value="" name="input_9">
</div>
<div class="gfield_description">This field is for validation purposes and should be left unchanged.</div>
</li>
On the stylesheet, I inserted:
.gfield gform_validation_container field_sublabel_below field_description_below #field_9_9 {
display:none;
}
I have a feeling I'm targeting the wrong element. Which one should it be?
You need to do this:
#field_9_9.gfield.gform_validation_container.field_sublabel_below.field_description_below {
display:none;
}
You forgot to add the "." before each class name and since all the classes (and ID) are on the same element, you need to join all the classes and ID together.
But a more elegant solution would be to simply target the ID:
#field_9_9 {
display:none;
}
Related
I need is an asterisk in the required fields
I have this code
.required label::after {
content: '*';
color: red;
}
in my html
<div class="required" >
<label for="entity"> entity </label>
<div>
<select id="entity">
<option value="">Entity</option>
</select>
</div>
</div>
This works well.
but I want to put it in a directive.
this is my directive
#Directive({
selector: '[lambRequired]',
host: {
'[style.after.content]': '"*"',
'[style.after.color]': '"red"',
},
})
export class RequiredDirective {
constructor() {
}
}
and in my html
<div >
<label lambRequired for="entity"> entity </label>
<div>
<select id="entity">
<option value="">Entity</option>
</select>
</div>
</div>
but this does not work anymore
help me I will be grateful.
Thank you
You cannot do this by using this approach since pseudo elements are not actually part of the DOM tree. As a consequence of that they are not exposed in any manner on the DOM API.
For you to be able to work with pseudo elements you would need to use a class / css like you were doing before.
But unless you were planning to have more functionality on the directive don’t see what kind of gain you would have to create a directive that would just change the color of the text and append an asterisk without any actual logic or event monitoring. A css class would be way more efficient for such a simple goal.
I have this composition :
<div class="theclass1">
<input type="checkbox" id ="1">
<div>
<div>
<div>
<label for="1">bla bla</label>
</div>
</div>
<input type="checkbox" id ="yy">
<label for ="yy">other</label>
</div>
<div class="theclass2">
<input type="checkbox" id ="2">
<div>
<div>
<div>
<label for="2">bla bla</label>
</div>
</div>
<input type="checkbox" id ="xx">
<label for ="xx">other</label>
</div>
</div>
</div>
I want (and I am super cofussed) to apply css styles to the label but only the first of 'theclass1'
I'm playing with first-of-type, first child, +div >div>div ,etc... without success.
Maybe somebody can explain me how to made this and if possible using some examples. I have a lot of troubles to understand the meaning of space, + and > selectors. Also... I think it can have more than one solution ?
I'd need code to style only the first label of theclass1, or the first inside >div>div>div but only this one. And something similar for theclass2.
Now I have a polluted css and undesirable results.
(The div 'theclass2' is inside div theclass1.)
Thanks in advance.
problem is not the CSS only, There are serious semantics errors in your HTML
id attribute name must not start with numbers
taken from HTML4 document of w3c
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be
followed by any number of letters, digits ([0-9]), hyphens ("-"),
underscores ("_"), colons (":"), and periods (".").
so much nesting , why these extra parent div div and div?
now first you fix the HTML nodes then apply below css
iff you want only first label of first div class
.theclass1:first-child > label:first-of-type
working DEMO
.theclass1 > div:first-of-type > div > div > label {
color: red;
}
http://jsfiddle.net/807t5L6z/
.theclass1 label:first-child {
color:red;
}
You could use this probably similiar code for label in .theclass2
General answer is that "global first label in HTML" couln't be done, see here: CSS global :nth-of-type selector (:nth-of-class)
And it's better to introduce class or id for this label.
However, if you want to target it without modifying HTML, you can use this selector:
label[for='1'] {
background:red
}
.theclass1 > div > div > div label {color:red;}
I'm trying to make a form that has a list of default options, and which can also expand to show a couple of exta options. I do this with the following CSS code:
.myForm .moreOpts {display:none;}
.myForm #more:checked +*+ .moreOpts {display:block;}
with the following HTML:
<form action="#" class="myForm">
<ul>
<li>
<input type="checkbox" id="pref-1" name="pref-1" value="1">
<label for="pref-1">Foo</label>
</li>
<li>
<input type="checkbox" id="pref-2" name="pref-2" value="2">
<label for="pref-2">Bar</label>
</li>
<li>
<input type="checkbox" id="more" name="more" value="true">
<label for="more">More options</label>
<ul class="moreOpts">
<li>
<input type="checkbox" id="pref-3" name="pref-3" value="3">
<label for="pref-3">Baz</label>
</li>
<li>
<input type="checkbox" id="pref-4" name="pref-4" value="3">
<label for="pref-4">Qux</label>
</li>
</ul>
</li>
</ul>
</form>
Demo
This code works perfectly in every browser, except for Android Browser and Dolphin. I've found an article that recommends adding this "bugfix", but that only fixes my problem in Dolphin.
Is there any way to make this work for the default Android Browser too?
You can achieve this with the help of the details element. Android supports it since version 4. However, you will have to deal with IE and Firefox, but fortunatly these browser support the CSS3 pseudo states, including :checked.
Two merge these two, just use the checkbox hack in browsers that don't support details. Here's the process explained in code: http://jsfiddle.net/hF6JP/1/
EDIT: this is the final solution, putting label inside the summary resolves the problem of having a forced checkbox to toggle the options: http://jsfiddle.net/mYdsT/
I wouldn't trust :checked for all browsers. I'd capture the click event of #more and just add a class to the parent. It's easy with jQuery. This option will work in Android and IE8.
$("#more").on("click", toggleCheckboxes);
var toggleCheckboxes = function(evt){
var $this = $(this);
$this.parents("li").toggleClass("show-more-options");
evt.preventDefault()
}
.myForm .moreOpts {
display:none;
}
.myForm .show-more-options .moreOpts {
display:block;
}
:checked isn't supported in IE8, which is sadly still a big deal
https://developer.mozilla.org/en-US/docs/Web/CSS/:checked
http://quirksmode.org/css/selectors/mobile.html#t60
:checked apparently doesn't work in any version of Android. I'm not sure why so many webpages report that it should work (apparently from 2.1 up), but this is false.
The nice thing about QuirksMode is that every feature is actually tested in a real browser before they post it on the web.
JavaScript appears to be your best solution. I would even recommend javascript because if a user checks the "more" box, then selects some of the extra options, and then unchecks the "more" box... the extra selections will still be "checked" and will get submitted if a user hits a "submit" button. You will have to un-check those boxes every time the "more" box is un-checked. The only way to do this is with javascript.
UPDATE: QuirksMode has written a flawed test for the :checked selector:
:checked {
display: inline-block;
width: 3em;
}
You will notice that on Android the width never changes... but this is due to the fact that Android does not apply a width to checkboxes and radios (while desktop browsers do).
The following does work, even in my Android 2.3:
:checked {
display: inline-block;
margin: 3em;
}
So, as stated in other comments, the problem is with the combination of the checked selector and the adjacent sibling selector:
:checked + .test { /* does not work on android :( */ }
:checked ~ .test { /* does not work on android :( */ }
Heads up: I am new to this forum and English is not my main language so sorry if its not completely understandable.
I am making a mobile website for school and it is going pretty far so well...
One problem: i have a thingy(sorry, dont know the name for it) in my css file(#styled_button) and works fine. There is one button i wanted to be positioned differently so i copied the code from '#styled_button' and created a new thingy and added postion:relative; and float:right; but for some reason my button doesnt get styled at all now. (i did change the id on my button).
EDIT: If i change my button id back to button_styled it is styled.
Even without changing the code, so #logout_button is the same as #button_styled, nothing happens.
My button:
<form action='m.member.php' method='POST'>
<input type='submit' name='logout_button' value='Logout' id="button_styled">
</form>
CSS:
#button_styled {
color:white;
background:#666;
font: bold 45px Harabara;
padding: 20px;
text-decoration: none;
vertical-align: middle;
}
EDIT: Typo removed(wasnt copy pasted from my original code), but the problem is not with the form since it works...
As by request of 'brbcode' here is the code of one of the other buttons im using:
<form action='m.loginscreen.php' method='POST'>
<p>Username:</p>
<input type='text' name='username' id="styled">
<p>Password:</p>
<input type='password' name='password' id="styled"><br>
<ul>
<li><input type='submit' name="loginbutton" value='Log In' class="button_styled"></li>
<li><input type='submit' name="registerbutton" value='Register' class="button_styled"></li>
</ul>
</form>
PS: Sorry again for my fluency in english, but for those that didnt fully understand my button works its just the styling...
It sounds like you might be using an ID on several elements in your html(?). ID's should only be used once per page - typically if you have one element that's different than all others. If you're using the button_styled type in several places, you should change it to a class. In your html:
<input class="button_styled" ... >
And in your CSS:
.button_styled {
/* your styling */
}
Hi all having a few problems with my CSS
I am trying to highlight a link on the navigation based on the page the user is on.
I have this style which works as I would like it to do, but when I pass a query-string into pcisHPprofile.aspx the CSS is not working. Does anyone know how i can get this style to work with query-strings?
body form[action="pcisHPprofile.aspx"] #btnuser
{
padding: 18px 4px 5px 4px;
background-image: url(../images/tabbluleft.gif) ;
background-repeat:no-repeat;
color: #fff;
}
<div id="nav" class="nav" >
<ul>
<li id="tab1">
<a id="btnsession" href="pcissessionlist.aspx" > <span >Session</span></a>
</li>
<li id="tab2">
<a id="btnsystem" href="pcissystemsettings.aspx" > <span >System Settings</span></a>
</li>
<li id="tab3">
</li>
<li id="tab4">
<a id="btnuser" href="pcisuserlist.aspx" > <span >User Logins</span></a>
</li>
<li id="tab5">
<a id="btninterpreter" href="pcisinterpreterlist.aspx" > <span >Interpreter Profile</span></a>
</li>
<li id="tab6"><asp:LinkButton ID="btnreports" runat="server" Visible="false" cssid="cssreports" PostBackUrl="#"><span>Reports</span></asp:LinkButton></li>
</ul>
</div>
I assume that the #btnuser ARE some buttonS inside the some forms, where one of the forms have action="pcisHPprofile.aspx"?
If that is correct, then your error is the fact that you have many buttons with the same id attirbute id="btnuser". The ID attibute MUST be uniqe on the page. change the id="btnuser" to class="btnuser" on the buttons and your selector from:
body form[action="pcisHPprofile.aspx"] #btnuser {
}
to
body form[action="pcisHPprofile.aspx"] .btnuser {
}
Then it should work.
In the first form it might work only if the FIRST button with id="btnuser" is actually inside the form with action="pcisHPprofile.aspx". If it is inside any other form, then it will not work.
Best regards,
SWilk
UPDATE:
After OP updated the question, I think that this form of selector should work:
body form[action^="pcisHPprofile.aspx"] #btnuser {
...
}
It would a element with id=btnuser inside a form, which action begins with "pcisHPprofile.aspx". It would not matter if the acutal action attibute contain only "pcisHPprofile.aspx" or "pcisHPprofile.aspx?any-parameters&and=some-values".
Best regards,
SWilk
Using action attribute for styling is a bad practice. Just give your form a name, class or ID like <form class="pcisHPprofile" action="pcisHPprofile.aspx"> and then apply CSS style to that name/class/id.
form.pcisHPprofile {
padding: ...
Found a working solution. a little hacky which I am not 100% keen on but it works.
I changed the query string to look like this
profile.aspx?-&username=
from this
profile.aspx?username=
and I changed the style to
Form[action|="pcisinterpreterprofile.aspx?"] #tab5
{
background-image: url(../images/tabbluright.gif);
background-repeat:no-repeat;
}
The difference is that I have changed the = to an |=.
[att|=val]
Represents an element with the att attribute, its value either being
exactly "val" or beginning with "val"
immediately followed by "-" (U+002D).
This is primarily intended to allow
language subcode matches (e.g., the
hreflang attribute on the a element in
HTML) as described in RFC 3066
([RFC3066]) or its successor. For lang
(or xml:lang) language subcode
matching, please see the :lang
pseudo-class.
by doing this the css selector works on pages with query strings. you just need to make sure the query string has at least ?- at the start. As I said at the last its not great but works.