So I have a data-list field below where I want to also change the label colour when the field is focused. What I've done below is I can't highlight the label when field is focused; it's the field only that is highlighted.
I have the css below:
<style lang="scss">
.panel-con {
color:rgba(0,0,0,0.54);
}
.group-list{
input:focus {
border-color: #dbb100;
}
}
</style>
How can I make the labels' color the same as the fields color when the field is focused?
If your label is before your input/select in the DOM, you can't do it with just CSS alone. You'd need JS.
If your label is after your input/select in the DOM, you could do something like this. (I've created something similar to what you have shown)
.wrapper {
position: relative;
padding-top: 30px;
}
.wrapper select {
display: block;
}
.wrapper select:focus {
color: red;
}
.wrapper select:focus + label {
color: red;
}
.wrapper label {
display: block;
position: absolute;
top: 0;
left: 0;
}
<div class="wrapper">
<select name="example">
<option val="1">Option 1</option>
<option val="2">Option 2</option>
<option val="3">Option 3</option>
<option val="4">Option 4</option>
</select>
<label for="example">Test Label</label>
</div>
you need
:focus-within
.wrapper:focus-within p {
color: red;
}
<div class='wrapper'>
<input class='input' type='text'/>
<p>your text</p>
</div>
Related
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 have this form, that I can't edit:
<body>
<form action="" method="post" class="adverts-form adverts-form-aligned">
<fieldset>
<div class="adverts-control-group adverts-field-text adverts-field-name-adverts_eventLength ">
<label for="adverts_eventLength">Durata evenimentului</label>
<span class="ui-spinner ui-corner-all ui-widget ui-widget-content">
<input name="adverts_eventLength" id="adverts_eventLength" aria-valuemin="1" aria-valuemax="999" autocomplete="off" class="ui-spinner-input" role="spinbutton" type="text">
</span>
</div>
<div class="adverts-control-group adverts-field-select adverts-field-name-adverts_eventUnits ">
<label for="adverts_eventUnits"> </label>
<select id="adverts_eventUnits" name="adverts_eventUnits" style="">
<option value="zile">zile</option>
<option value="săptămâni">săptămâni</option>
<option value="luni">luni</option>
<option value="ani">ani</option>
</select>
</div>
</fieldset>
</form>
</body>
I want to align inline horizontally the two form DIVs, but keeping the position and the width of the first DIV label unchanged. Is there a way to do this with CSS?
This is the working (solved) solution: https://jsfiddle.net/iuriemalai/cp7kvLrw/32/
You can just float it.
.adverts-form-aligned .adverts-control-group > label {
float:left;
width: 30%;
}
.adverts-form input[type="text"] {
width: 60%;
float:left;
}
Make it like
.adverts-form-aligned .adverts-control-group > label {
display: inline-block;
width: 30%;
}
.adverts-control-group {
float: left;
}
.adverts-form input[type="text"] {
width: 60%;
}
This is the CSS code that helped to solve my problem:
body .adverts-form.adverts-form-aligned .adverts-field-name-adverts_eventLength {
overflow: initial;
}
.adverts-form.adverts-form-aligned .adverts-control-group.adverts-field-text.adverts-field-name-adverts_eventLength label,
.adverts-form.adverts-form-aligned .adverts-field-name-adverts_eventLength .ui-widget.ui-widget-content {
float: left;
}
body .adverts-form.adverts-form-aligned .adverts-field-name-adverts_eventUnits {
clear: initial;
}
body .adverts-form .adverts-field-name-adverts_eventUnits > label {
display: none;
}
body .adverts-form .adverts-field-name-adverts_eventUnits > #adverts_eventUnits {
width: 112px;
}
jsfiddle
Without modifying the html, how can I align it's label to top like in the picture:
<div class="col">
<label for="foo">Select:</label>
<select id="foo" name="select">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="col">
<label for="bar">Select any of the following:</label>
<select id="bar" name="select">
<option value="11">11</option>
<option value="22">22</option>
</select>
</div>
I can align label to the top and select to the bottom if it was in two div blocks using vertical-align, but I wanted to know without modifying the html code how can I align the label to the top and select to the bottom?
Use Display: Table-cell to make both columns have the same height:
div.col {
display: table-cell;
border: 1px solid blue;
font-size: 300%;
width: 300px;
position: relative;
padding-bottom: 40px; /* Space for the 'select'*/
}
select {
position: absolute;
bottom: 0;
left: 0;
}
Demo: (Tested in Chrome) http://jsfiddle.net/cM6Yp/
I have a form that is being filled with dynamically generated dropdowns.
I have set the display property to 'table' on advice in order to keep the container centered even as the elements are added.
The problem I have is that I'm using an input type=image instead of a button to submit the form and this image will not stay in the container when the dynamic dropdowns area added. As soon as the a single dropdown is added the width increase in the div containing the form pushed the 'button' down onto the next line, while I want to keep it inline.
ps I have tried adding display: inline but this isnt working.
<div id="searchBar">
<div id="searchwrapper">
<form name="search_input">
I am looking for a
<div id="sBar1" style="display:inline;">
<select id="search_level" class="selectSearchBar" name="search_level">
<?php
echo "<option>Level</option>";
while($row = mysqli_fetch_array($result_level, MYSQLI_ASSOC)){
echo "<option value=".$row['id'].">".$row['level']."</option>";
}
?>
</select>
</div>
<div id="sBar2" class="selectSearchBar"></div>
<div id="sBar3" class="selectSearchBar"></div>
tutor in <input type=text class="searchbox" id="location" value="Location"/>
<input type=image src="images/search_icon.png " class="searchbox_submit" name="searchbox_submit" onclick="searchLocations()" value=""></form>
</div>
</div>
and the corresponding CSS:
#searchBar{
width:940;
margin: 0px auto;
}
#searchwrapper{
display: table;
margin: 0 auto;
min-width:600px;
padding-top: 10px;
background: red;
}
#searchwrapper form {
}
.searchbox {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
width:200px;
height:40px;
border-radius:9px;
font-size: inherit;
}
.searchbox_submit {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
}
.selectSearchBar{
height:40px;
width:137px;
display:inline;
background-image: url('../images/up_down_arrows.png');
background-position: right center;
background-repeat:no-repeat;
margin:3px 1px 0px 0px;
border-radius:9px;
}
This image is what I want i.e. the icon at the end of the row
this is the problem after each select is added dynamically:
If I were doing this, I would start with the following HTML:
<div id="searchBar">
<div id="searchwrapper">
<form name="search_input">I am looking for a
<div id="sBar1" class="selectSearchBar">
<select id="search_level1" class="selectSearchBar" name="search_level">
<option value="1">Option 1</option>
<option value="1">Option 1</option>
<option value="1">Option 1</option>
</select>
</div>
<div id="sBar2" class="selectSearchBar">
<select id="search_level2" class="selectSearchBar" name="search_level">
<option value="1">Option 1</option>
<option value="1">Option 1</option>
<option value="1">Option 1</option>
</select>
</div>
<div id="sBar3" class="selectSearchBar">
<select id="search_level3" class="selectSearchBar" name="search_level">
<option value="1">Option 1</option>
<option value="1">Option 1</option>
<option value="1">Option 1</option>
</select>
</div>tutor in
<input type=text class="searchbox" id="location" value="Location" />
<input type=image src="http://placehold.it/20x20 " class="searchbox_submit" name="searchbox_submit" value="">
</form>
</div>
</div>
On your select elements, make sure the id values are unique.
For the CSS:
#searchBar {
width: 940px;
margin: 0px auto;
border: 1px dotted blue;
text-align: center;
}
#searchwrapper {
min-width: 600px;
padding: 10px 0;
background: red;
display: inline-block;
}
#searchwrapper form {
}
div.selectSearchBar {
display: inline-block;
vertical-align: middle;
}
select.selectSearchBar {
width: 137px;
height: 40px;
border-radius: 9px;
display: inline-block;
}
.searchbox {
width: 200px;
padding: 5px;
border-radius: 9px;
font-size: inherit;
vertical-align: middle;
}
.searchbox_submit {
vertical-align: middle;
}
See working demo at: http://jsfiddle.net/audetwebdesign/Kjby6/
How This Works
The strategy is to keep all the elements in a single line, so you want to use either floats or inline-blocks or inline elements.
Let's start with the two simplest elements, .searchbox and .searchbox_submit, both of with are inline input elements, so no need to do anything, except adjust the vertical positioning with vertical-align: middle (my choice, but please adjust as you see fit).
The div.selectSearchBar is a block level element by default, so set display: inline-block and vertical-align: middle.
For the select.selectSearchBar, specify the height and border radius and use display: inline-block in case you want to add margins or padding or whatever you may need for styling.
Now, all your elements sit a horizontal line and are use vertically-align: middle to place your input elements with respect to the inline text.
These elements are enclosed by #searchwrapper, so I want this box to shrink-to-fit the content so use display: inline-block, add padding for visual formatting.
Finally, to center #searchwrapper, use text-align: center for the #searchBar parent container.
You need to increase the width of the main container, #searchBar (currently 940px) or decrease the width of the "Location" input field just enough so that there is room left for the search icon / submit button. The issue is that the current width isn't enough to fit everything on one line after the additional select dropdown is added.
You can easily decrease the width of the "Location" input since there is a lot of blank space that the text doesn't fill.
In the example below:
I want the textbox to fill all available space. The problem is the dropdown width cannot be fixed, since its elements are not static. I would like to solve this with just css (no javascript if possible).
I have tried the solutions proposed to similar questions without any luck :(
Here is the fiddle: http://jsfiddle.net/ruben_diaz/cAHb8/
Here is the html:
<div id="form_wrapper">
<form accept-charset="UTF-8" action="/some_action" method="post">
<span class="category_dropdown_container">
<select class="chosen chzn-done" name="question[category_id]" id="selQJK">
<option value="1">General</option>
<option value="2">Fruits</option>
<option value="3">Ice Creams</option>
<option value="4">Candy</option>
</select>
</span>
<span class="resizable_text_box">
<input id="question_text_box" name="question[what]" placeholder="Write a query..." type="text" />
</span>
<input name="commit" type="submit" value="Ask!" />
</form>
</div>
And here the css:
#form_wrapper {
border: 1px solid blue;
width: 600px;
padding: 5px;
}
form {
display: inline-block;
width: 100%;
}
.category_dropdown_container {
}
.resizable_text_box {
border: 1px solid red;
}
input[type="text"] {
}
input[type="submit"] {
background-color: lightblue;
width: 80px;
float: right;
}
Updated demo (tested fine in IE7/8/9/10, Firefox, Chrome, Safari)
Float the left and right elements.
In the HTML source code, put both of the floated elements first (this is the most important part).
Give the middle element overflow: hidden; and an implict width of 100%.
Give the text box in the middle element a width of 100%.
.category_dropdown_container {
float: left;
}
input[type="submit"] {
float: right;
...
}
.resizable_text_box {
padding: 0 15px 0 10px;
overflow: hidden;
}
.resizable_text_box input {
width: 100%;
}
<div class="category_dropdown_container">
<select class="chosen chzn-done" name="question[category_id]" id="selQJK">
...
</select>
</div>
<input name="commit" type="submit" value="Ask!" />
<div class="resizable_text_box">
<input id="question_text_box" name="question[what]"
placeholder="Write a query..." type="text" />
</div>
The relatively recent 'flex' display css property solves this problem for you:
All you need to do is change form's display to inline-flex, give .resizable_text_box flex-grow: 100; and give #question_text_box width: 100%
Full example from the OP:
<style>
#form_wrapper {
border: 1px solid blue;
width: 600px;
padding: 5px;
}
form {
display: inline-flex;
width: 100%;
}
.category_dropdown_container {
}
.resizable_text_box {
border: 1px solid red;
flex-grow: 100;
}
#question_text_box {
width: 100%
}
input[type="text"] {
}
input[type="submit"] {
background-color: lightblue;
width: 80px;
float: right;
}
</style>
<div id="form_wrapper">
<form accept-charset="UTF-8" action="/some_action" method="post">
<span class="category_dropdown_container">
<select class="chosen chzn-done" name="question[category_id]" id="selQJK">
<option value="1">Options</option>
</select>
</span>
<span class="resizable_text_box">
<input id="question_text_box" name="question[what]" placeholder="Write a query..." type="text" />
</span>
<input name="commit" type="submit" value="Ask!" />
</form>
</div>
Flex-box lets you do what you wanted to do with css for 15 years - its finally here! More info: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Change some of those <span> elements to <div> elements; then float:left the division around your dropdown; then give the one of the right an overflow:hidden and the input element inside it a width:100%;.
Here's an example. Here it is again with a bigger drop down.
Except that screws up the submit button. So give the #form_wrapper non-static positioning (position:relative) and position the submit button absolutely. See this fiddle and this one.