I have a dropdown list using a <select> element. For where I place this dropdown list on the page, I only want that page's list affected by a style so I give a class of 'posts' on the select element.
In my style sheet, I have:
.posts select
{
margin-left: 40px
}
It does not work UNLESS I remove the .post. Why?
Here's the element:
<select class="form-control posts" (change)="reloadPosts({ userId: u.value })" #u>
<option value="">Select a user...</option>
<option *ngFor="#user of users" value="{{ user.id }}">
{{ user.name }}
</option>
</select>
.posts select target a select being a child of an element having the class .posts
HTML Sample where .posts select work
div {
background: lightblue;
}
.posts select {
margin-left: 40px;
}
<div class="posts">
<select>
<option>Select a value</option>
</select>
</div
In your case you should do like this, select.posts, which target a select having the class posts
Do note, there should be no space between select and .posts
HTML Sample where select.posts work
div {
background: lightblue;
}
select.posts {
margin-left: 40px;
}
<div>
<select class="posts">
<option>Select a value</option>
</select>
</div
Related
I'm unable to center the text and arrow of my select dropdown using pure CSS. I have tried absolute:position and text-align:center. text-align:center centers the text only. It looks like this:
I want it to look like this:
<div class="col-sm-12 mobile-controller">
<select class="select" id="dropGroup">
<option value="head"> Head/Neck </option>
<option value="torso"> Shoulders/Torso </option>
<option value="legs"> Legs/Hips </option>
</select>
</div>
#mobile #dropGroup {
width: 100%;
height: 10vw;
border-radius: 5px;
}
.select#dropGroup {
text-align: center;
}
I trying to find out which Selectors its for the background Color of Dropdown Contactform.
I used many selector but nothing works.
Contact form:
You would have to select the option tags inside the select tag. See my example below.
I have an id of #dropDown on the select tag. Then, I use #dropDown option to change the color of the text inside the option tags in the dropdown.
So in the inspect tool, get the CSS attribute of that select element and change the color of the option children.
html, body {
width: 100%;
min-height: 100%;
padding: 0;
margin: 0;
background-color: crimson;
}
#dropDown {
background-color: transparent;
color: white;
}
#dropDown option {
color: black;
}
<form action="">
<select name="" id="dropDown">
<option value="">Test 1</option>
<option value="">Test 2</option>
<option value="">Test 3</option>
</select>
</form>
I want to stylize a <select> for the case when not "please select" is chosen.
E.g.
select{
color: gray;
}
select:not-empty{
color: blue;
}
HTML:
<select>
<option value="">Empty, please gray</option>
<option value="something">If selected, select in blue</option>
<option value="something2">If selected, select in blue</option>
</select>
so if the option value is empty -> gray
option value not empty -> blue
Codepen:
https://codepen.io/jossnaz/pen/dLxezv
what do I want?
this:
HTML5's validation can help you out here. Specifically, you need to make the select be required. Then use the :valid pseudo class to do the styling.
Keep in mind that value="" (undefined) is NOT valid. Any string IS valid so you can use this to your advantage.
Here's an example:
select {
font-size: 14px;
color: #ccc;
padding: 5px 10px;
}
select:focus {
outline: 0 none;
}
select:valid {
color: blue;
}
<select required>
<option value="">Empty value isn't valid</option>
<option value="1">Valid option</option>
<option value="2">Another valid option</option>
</select>
I'm editing someone other's code, there's an existing form and css file, what I did is that I added 5 "select" tags into the form, and I want to make the selects inline.
Each select has a label, so I put them two in a div, thus I have 5 divs.
I want to put the first 3 div in one row, and last 2 in another row.
I was working on the css file for hours to get things work, but still failed.
The problem I'm getting now is that I cannot put the s in the same line, each of them occupies a separate line, so I have 5 rows in the form now... but I just need 2 rows.
Please help me on that, not quite familiar with CSS.
<html>
<link rel="stylesheet" href="css/mrbs.css.php" type="text/css">
<link rel="stylesheet" media="print" href="css/mrbs-print.css.php" type="text/css">
<form id="add_room" class="form_admin" action="addsystem.php" method="post">
<fieldset>
<legend>Add System</legend>
<div id="sdw-div" style="white-space:nowrap; display:inline">
<label for = "sdw">sdw:</label>
<select id="sdw" name="sdw" style="display:inline">
<option selected="selected" value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div id="etl-div" style="white-space:nowrap; display:inline">
<label for = "etl">etl:</label>
<select id="etl" style="display:inline" name = "etl">
<option selected="selected" value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div id="hdm-div" style="white-space:nowrap; display:inline">
<label for = "hdm">hdm:</label>
<select id="hdm" style="display:inline" name = "hdm">
<option selected="selected" value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div><strong>
.........other two are just the same....
</form>
</html></strong>
and here is the css file for form_admin
form.form_admin {float: left; clear: left; margin: 2em 0 0 0}
.form_admin fieldset {float: left; width: auto; border: 1px solid <?php echo $admin_table_border_color ?>; padding: 1em}
.form_admin legend {font-size: small}
.form_admin div {float:left; clear:left;}
.form_admin label {
display: block; float: left; clear: left;
width: <?php echo $admin_form_label_width ?>em; min-height: 2.0em; text-align: right;
}
.form_admin input {
display: block; float: left; clear: right;
</strong> width: <?php echo $admin_form_input_width ?>em;
margin-top: -0.2em; margin-left: <?php echo $admin_form_gap ?>em;
font-family: <?php echo $standard_font_family ?>; font-size: small;
}
.form_admin select {
display: block; float: left; clear:right; margin-left: 1.0em;
}
.form_admin input.submit {
width: auto; margin-top: 1.2em; margin-left: <?php echo number_format(($admin_form_gap + $admin_form_label_width), 1, '.', '')?>em
}
Give div a float:left; css that will display them as inline.
Also remove <strong> from end of html tag.
Demo
try :
display:inline-block
i find it works better than elseware options
your divs are already display:inline, besides , you also have float:left-ed them.
still if they don't appear in the same line,then there is just one thing, your parent container doesn't have proper width to accommodate all the divs in same line.
so give appropriate width to your parent container
see this fiddle. everything's working!
Add style float:left for all five div. Also add a
<div style="clear:all"></div>
after third div. Also needed a parent container with proper width;
I'm trying to create a basic title bar div that contains an h1 and a select list. I want the select list to be on the far right of the div, but floating it right is not working. Does anyone have any ideas? The code is very simple but can't see where the mistake is. Thanks!
<style type="text/css">
#select {
float: right;
}
h1 {
display: inline;
}
#titleBar {
width: 800px;
}
</style>
<body>
<div id="titleBar"><h1>Select Your Car </h1>
<select name="categories">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
</body>
Here's a link to the jsfiddle: http://jsfiddle.net/qhvDG/1/
Your style is not correct it should be as shown below, because the # represents an element's id and select is the tag name not the id.
select {
float: right;
}
Or better yet a little more descriptive like this:
div#titleBar > select {
float: right;
}
Here is an example fiddle http://jsfiddle.net/qhvDG/3/
Your "select" in the CSS is an ID, not an element name. Just remove the # sign from #select.
Try using "select" instead of #select in your style.
select {
float: right;
}