Css style dont pass to label inside form - css

I have form:
<form class="userForm">
...
</form>
inside of this form is fieldset then div and inside of div is label. Now I want to create css to all label inside of this form:
I try this:
form.userform label {
width: 150px;
}
but with no success
please help


Check your capitalization. Change your form classname to userform or use the following CSS:
This should work:
form.userForm label {
width: 150px;
}
And also this should work (like Girish suggested earlier):
.userForm label {
width: 150px;
}


Without seeing more code, this selector is valid. What i think you need to add is display:block to the label as this isn't a block level element.
form.userform label {
width: 150px;
display: block;
}
Now the width will be visible.


Please try below css code :
.userForm label {
width: 150px;
}


try it .
.userform fieldset div label {
width: 150px;
}

Related

Apply same style to same type of element of different classes [duplicate]

div#id_div_allposts {
width: 100%;
}
div.class_div_post {
width: 100%;
}
div.class_div_editdelete {
width: 100%;
}
How can i write it in one line ?
And what's the way to select a html tag with id and class ?

All you have to do is separate them with a comma e.g
div#id_div_allposts,
div.class_div_post,
div.class_div_editdelete {
width:100%;
}

div#id_div_allposts, div.class_div_post, div.class_div_editdelete {
width: 100%;
}
You can group multiple selectors in CSS via a comma.
Note: The comma starts an entirely new selector from the very start.

Use the comma to separate multiple declarations
div#id_div_allposts, div.class_div_post, div.class_div_editdelete {
width: 100%;
}
Selecting an html tag with and id and class would be
div#ID.class

Try this:
div#id_div_allposts, div.class_div_post, div.class_div_editdelete {
width: 100%;
}
or assuming that you want all div to have width 100% then...
div{
width: 100%;
}

CSS3 webkit-scrollbar hidden when not needed

I have the following code to style custom scrollbars, but when the scrollbar is not needed because the content is not very long, I would like to hide the scrollbar. Is this possible?
Here's the code I have so far...
.myscroll::-webkit-scrollbar {
width: 15px;
}
.myscroll::-webkit-scrollbar-track {
border-radius: 3px;
background-color:#D4D4D4;
}
.myscroll::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color:#0085bf ;
}

Assuming that the element is having class myscroll, you can try following css
.myscroll{
overflow:auto;
}
It might solve your issue.

Cannot apply padding to <b>

Is there a reason why the padding-top is not working for the tag? See http://jsfiddle.net/MMwdR/
<b>hello world</b>​
b {
padding-top: 100px;
}
​

display it as a block.
display: block;

To add on to what was said, update your CSS to:
b {
display: block;
padding-top: 100px;
}
Otherwise the element is displayed as a part of the line, so you cannot add padding-top, etc.

CSS:Defining Styles for input elements inside a div

I have a div called "divContainer" inside which i have few input elements like textboxes,radio buttons et..
How can i define the style for then in the CSS ? I wanna mention styles for elements inside this purticular div.not for the entire form.
Ex: For textboxes i need width as 150px;
For Radio buttons i need width of 20px;

You can define style rules which only apply to specific elements inside your div with id divContainer like this:
#divContainer input { ... }
#divContainer input[type="radio"] { ... }
#divContainer input[type="text"] { ... }
/* etc */

CSS 3
divContainer input[type="text"] {
width:150px;
}
CSS2
add a class "text" to the text inputs then in your css
.divContainer.text{
width:150px;
}

Like this.
.divContainer input[type="text"] {
width:150px;
}
.divContainer input[type="radio"] {
width:20px;
}

When you say "called" I'm going to assume you mean an ID tag.
To make it cross-brower, I wouldn't suggest using the CSS3 [], although it is an option. This being said, give each of your textboxes a class like "tb" and the radio button "rb".
Then:
#divContainer .tb { width: 150px }
#divContainer .rb { width: 20px }
This assumes you are using the same classes elsewhere, if not, this will suffice:
.tb { width: 150px }
.rb { width: 20px }
As #David mentioned, to access anything within the division itself:
#divContainer [element] { ... }
Where [element] is whatever HTML element you need.

Will CSS attribute selector work to style this element?

I have the following html:
<div class="bf_form_row">
<label for="findout">Text goes here</label>
<textarea class="findOut" cols="40" id="findout" name="findout" rows="10"></textarea>
</div>
I trying to work out how to style the 'label' element without being able to change the html.
Ideally I'd like to style all 'label' elements that come before 'textarea' elements but I don't think it is possible using just CSS.
I thought this attribute selector would work:
label[for="findout"] {
width: 100%;
}
but no, any ideas?

It works. To see it in action, try changing the color. Anyway, if you want the width to be 100%, I would suggest adding display: block;
label[for="findout"] {
display: block;
width: 100%;
}

Use two classes for ex:- 1] before_textarea 2] after_textarea
.before_textarea {
width: 100%;
// style to label which comes before teaxtarea
}
.after_textarea {
width: 100%;
// style to label which comes after teaxtarea
}

Use the selector:
.bf_form_row label
{
styles
}
This will select all label elements inside the parent with class of bf_form_row.
Hope that helps :)

Resources