I have the following style for an input box
input[type="text"] {
height:16px ;
font-size:14 ;
border-radius: 5px ;
}
What I want to do is have this style on most of the inputs but I want to make a class of input so I can add background color, etc. How can I do this in the syle sheet?
Use classes
Define a class with the different style
input[type="text"].different {
background-color:red;
}
and apply it to the input element in the html
<input type="text" class="different" />
This input will have all the properties of the generic rule input[type="text"] and then apply all the properties of input[type="text"].different class.
The input[type="text"].different is more important so in case of overlapping properties the ones in the .different class will prevail.
Read https://developer.mozilla.org/en-US/docs/CSS/Class_selectors and https://developer.mozilla.org/en-US/docs/CSS/Specificity
input[type="text"].yellow {
background-color: yellow;
}
Related
I am using Bootstrap.css, and there's a class named "form-control".
I am using this class to style my aspx controls. The problem is that its textbox font color is grey and I want it to be black. I have no clue about CSS. Is there a way I can change that from grey to black?
Thanks.
You can reset the text color of class - 'form-control' by adding
.form-control {
color:#000000;
}
Add this property in a separate css file and include it just below bootstrap.min.css in head tag.
If you want all the textboxes font color to be black, add this:
input[type="text"] { color: black }
in your CSS file.
Otherwise, create a class:
.black-input {
color: black
}
<input type="text" class="black-input">
Go to http://getbootstrap.com/customize/ and select the colors you want, then Compile and Download at the bottom.
use this:
.input-black {
// this is the one can change the color of a text even if its a placeholder
color: black;
}
<input type="text" class="input-black">
You would need to add some code like this to your CSS file.
.form-control {
color: #000;
}
Keep in mind that you may have some specificity declaration issues. For example, if the color is set in bootstrap.css as a child of another element, you may not be able to override the color change unless you declare it with the parent as well. For example:
.parent .form-control {
color: #000;
}
You shouldn't be scared to learn some CSS though. It's very easy to grasp (you'll literally get the basics in less than an hour).
Let say I have following class into my general.css. this css has been applied on default.aspx.
In general.css there is class checkbox{ .... }
on default.aspx I have one checkbox with
<input type='checkbox' />
so when page loads class checkbox applied on my checkbox. I want to prevent to apply checkbox class on this
checkbox. condition is I can't change general.css also I can't remove reference of general.css from default.aspx.
only can do with input tag.
checkbox is not a class,
.checkbox is a class, notice the dot in front of "checkbox"
to limit the CSS styling to a specific element, you can use ID.
<input type='checkbox' id='checkboxWithStyle'/>
in the CSS:
#checkboxWithStyle{
background-color:red;
}
Let's say you have css as follows:
input[type='checkbox'] {
border: 2px solid red;
}
Add another class:
input[type='checkbox'].notdefault {
border: none;
}
Then change your input:
<input type="checkbox" class="notdefault" />
The new class can be in another css file or embedded in the aspx page.
I'm building a screen with many form elements using the convention below; it saves me from adding class='...' to every input, button, and select box.
.formDiv button {
font-family: verdana;
font-size: 10px;
border: 1px solid #999;
border-radius:3px;
}
.formDiv input {
font-family: verdana;
border: 1px solid #999;
width: 110px;
}
Now I want to use bootstrap; I've got everything configured; confirmed it's working.
Is it possible to apply bootstrap3 styling without adding class='some-bs-style' to each form element? Ideally, I want to do something like this:
.myDiv input {
//use bs3 input styling
}
.myDiv select {
//use bs3 select styling
}
I see bootstrap uses form-control, so I tried setting that on the parent div using:
<div id='#formdiv' class='form-control'>
..but it did not work; I suck at css, so no surprise there.
Copy the rules from form-control and just apply the rules to input and select if you want to use it automatically for your formdiv class:
.formdiv input, select {
RULES FROM FORM CONTROL
}
DEMO HERE
Updated DEMO + CSS is here: http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.css
Copying is necessary because you cannot inherit rules from other classes. Therefore if you want to avoid applying form-control style to each input and select, you have to use approach above. But this is still faster than putting "form-control" to each input in each form.
I have a search bar in my navigation bar (using Bootstrap):
<li>
<form class="navbar-search pull-right">
<input type="text" class="search-query offset1" placeholder="Search">
</form>
</li>
I want to change the default background color and text color, so I've implemented the following CSS:
input .search-query {
background-color:#f47443;
color:white;
}
Yet the colors remain the same -- black and white. Is there something special about form/input background colors and font colors that I'm missing?
You want:
input.search-query {
/* css */
}
JS Fiddle demo.
Without the space it selects an input element with a class of search-query; with a space separating the terms input and .search-query the browser is looking inside the input element for a descendant element with the search-query class.
Incidentally, the selector as you wrote it:
input .search-query {
/* css */
}
could never match any element, since an input (as are img elements) void elements in that they cannot contain descendant elements or even text.
References:
CSS Selectors (Level 3), W3.org.
input .search-query {
background-color:#f47443;
color:white;
}
>
input.search-query {
background-color:#f47443;
color:white;
}
Remove space.
I used 'for' attribute in label tag in HTML but using that made my lable look grey rather than default black help me to make this black uniformly without using any inline style or giving any special class attribute in each label.
You could just change the style all labels.
label {
color: #000; /* makes the text-black */
}
of you can make it more specific...
#form-id-here label {
color:#000;
}
That way you can change the labels for a certain form only.