I am using the same style for my dropdown box, and a textbox, which is working fine, except that they are different lengths, only by ~10px
http://jsfiddle.net/PkWVg/
I can't seem to get them the same length without using seperate classes for each. It actually seems that the dropdown icon at the end is suppose to be to the right more?
CSS:
#container {
width:500px;
}
.form-textbox, .form-dropdown {
border: 0;
outline: 0;
height: 20px;
width:100%;
padding-left: 10px;
background-color: rgb(204, 204, 204);
color: #666;
}
HTML:
<div id="container">
<select class="form-dropdown " name="turnover" />
<option value="1">Less than £49,999 per year</option>
<option value="2">£50,000 - £99,999 per year</option>
<option value="3">£100,000 - £249,999 per year</option>
<option value="4">£250,000 - £499,999 per year</option>
<option value="5">£500,000 - £999,999 per year</option>
<option value="6">£1,000,000 or more per year</option>
</select>
<br>
<p>
<input class="form-textbox ofTextbox" name="market" type="text" />
</p>
</div>
Apply box-sizing
.form-textbox, .form-dropdown{
border: 0;
outline: 0;
height: 20px;
width:100%;
padding-left: 10px;
background-color: rgb(204, 204, 204);
color: #666;
-moz-box-sizing: border-box; // Added rule
-webkit-box-sizing: border-box; // Added rule
box-sizing:border-box; // Added rule
}
Fiddle
Add this:
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
The padding-left:10px appears to be the problem. If you remove that, the fields are the same length.
Related
Here's a sample of what it should look like : Select box image
I get country names from a database and generate dynamic options on page. Right now, i am showing the Html code (Not the database code). I tried lots of links to change the design (CSS), but none of them work on "select". I want to be able to change padding , border, background-color, color or border-color. Can i apply modifications to all those, for "select", using css or not ?
I also want to only show the first 5 options (first 5 country names) in the dropdown list when the button is clicked, using a scrollbar.
#country option:first-child {
display: none;
}
#country {
float: left;
width: 96%;
color: #fff;
font-size: 1em;
font-family: "Calibri";
margin-left: 5px;
padding: 8px 0px;
margin-top: 16px;
border: 1px solid #00BCEA;
padding: 9px 5px;
width: 93%;
border-radius: 4px;
color: #00BCEA;
}
<select id="country">
<option value="selectOption">Select your country</option>
<option value="selectOption1">Select your country1</option>
<option value="selectOption2">Select your country2</option>
<option value="selectOption3">Select your country3</option>
<option value="selectOption4">Select your country4</option>
<option value="selectOption5">Select your country5</option>
<option value="selectOption6">Select your country6</option>
<option value="selectOption7">Select your country7</option>
</select>
Quite simply, is there any way to style specific select options in Chrome/Safari?
For example, if I had:
<select class="the-select">
<option class="header">TECHNICIANS</option>
<option>Joe Smith</option>
<option>Joe White</option>
<option class="header">PRODUCERS</option>
<option>Jane Black</option>
<option>Cindy Gray</option>
</select>
Is there anyway to style specifically those options with the class "header"? Obviously in CSS, if you do this:
select.the-select option.header {
background-color:#ff9900;
}
This should work, and does in other browsers, but not Chrome/Safari. Is this just a webkit issue and are there any workarounds for this?
Thanks!
EDIT: This seems to be an OSX webkit based browser issue, as it seems to work on Windows. I neglected to mention the fact that I cannot use optgroups because we need to be able to select those options as well. I am aware that optgroups would be the ideal solution, but unfortunately that cannot be the case in this instance.
I recently came across this technique to custom style a select tag with only CSS.
HTML:
<div class="styled-select">
<select class="the-select">
<optgroup label="TECHNICIANS">
<option>Joe Smith</option>
<option>Joe White</option>
</optgroup>
<optgroup label="PRODUCERS">
<option>Jane Black</option>
<option>Cindy Gray</option>
</optgroup>
</select>
</div>
CSS:
.styled-select {
width: 342px;
height: 30px;
overflow: hidden;
background: url("/img/selectarrow.png") no-repeat right;
border: none;
opacity: 0.8;
background-color: #999999;
}
.styled-select select {
background: transparent;
width: 342px;
padding-bottom: 10px;
padding-left: 10px;
padding-top: 5px;
font-size: 16px;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
font-weight: 200;
font-family: "lato", sans-serif;
font-size: 18px;
}
.styled-select select:focus {
outline: none;
}
Here's a fiddle: http://jsfiddle.net/eshellborn/AyDms/
And then just make sure you get a picture called 'selectarrow' for the drop-down image.
If you just want them to clearly be headers, use a tag intended for this: <optgroup>. This might also help you with applying CSS.
<select class="the-select">
<optgroup label="TECHNICIANS">
<option>Joe Smith</option>
<option>Joe White</option>
</optgroup>
<optgroup label="PRODUCERS">
<option>Jane Black</option>
<option>Cindy Gray</option>
</optgroup>
</select>
Actually you can try applying '-webkit-appearance: none;' for option.
select option {
-webkit-appearance: none;
}
select option.blue {
color: blue;
background-color: green;
}
select option.red {
color: red;
background-color: gray;
}
select option.pink {
color: pink;
background-color: yellow;
}
<select>
<option class="blue">SomeOption1</option>
<option class="red">SomeOption2</option>
<option class="pink">SomeOption3</option>
<select>
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.
See here: http://jsfiddle.net/zemar
(Must use Firefox or Opera to see)
When you click on the select, the drop-down is styled to match, but if you start typing a term from the data-list in the text box the suggestions that appear aren't styled and therefore it doesn't match the rest of the styling.
Is it possible to style the drop-down?
* {margin:0; padding:0; font-family: arial, sans-serif; font-size: 40px; font-weight: bold; color: #444;}
body {height:100%; background:#F4F3EF;}
.select select, .input input {background: transparent; width: 220px; overflow:hidden; height: 65px; padding-left: 5px;
padding-bottom: 5px; -webkit-appearance: none; -moz-appearance:none; appearance:none; border:none; cursor:pointer;}
.select select {padding-top: 5px;}
.select, .input {float:left; width: 220px; height: 65px; margin-right: 20px; overflow: hidden; background: #ddd;
border: 1px solid #ccc;}
<div class="select">
<select id="count">
<option value="1">A</option>
<option value="2">A pair of</option>
<option value="3">A few</option>
<option value="4">Four</option>
</select>
</div>
<div class="input">
<input type="text" id="query" list="ingredients" placeholder="lamb"></input>
<datalist id="ingredients">
<option value="lamb">
<option value="beef">
<option value="chicken">
<option value="fish">
<option value="vegetarian">
</datalist>
</div>
Styling datalist with CSS only is not possible across browsers.
Internet Explorer, Firefox, Chrome and Edge apply basic styling to the input[list] element, but neither to datalist, nor to its option child elements.
See CodePen example.
Citing from MDN “Styling HTML forms – the ugly”:
Some elements simply can't be styled using CSS. These include: all advanced user interface widgets, such as range, color, or date controls; and all the dropdown widgets, including <select>, <option>, <optgroup> and <datalist> elements.
A very common way to circumvent this UI limitation is to provide a JavaScript based widget, that falls back to the HTML5 input+datalist combination for users which have JS disabled.
From the best of my knowledge you cannot style the <datalist> tag. I recommend using the JQuery extension autocomplete. So you're need to include JQuery in your html document. here is a link hosted by Google: See here
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script
Note: you can get better performance by including this at the end of the document and using $(document).ready();
For example:
HTML:
<input type='text' id='input'>
Javascript:
$(document).ready(function() {
var arrayOfOptions = [
"Option 1",
"Option 2",
"etc"
];
$("#input").autocomplete({source: arrayOfOptions});
});
note: not tested code!
Source: http://jqueryui.com/autocomplete/
You can style this similarly to how you style a nav. Here are some classes you can style:
.ui-autocomplete span.hl_results {background-color: #ffff66;}
.ui-autocomplete-loading {} //the object while it's loading (in the event of Ajax, in this case would not need this one
.ui-autocomplete {
max-height: 250px;
overflow-y: auto;
overflow-x: hidden;
padding-right: 5px;
}
.ui-autocomplete li {font-size: 16px;}
html .ui-autocomplete {
height: 250px;
}
Not sure if the title makes much sense, but here is what I'm trying to do.
<div class="mystyle">
<select name="somename" id="somename">
<option value="Value1">
<option value="Value2">
</select>
</div>
<div class="myotherstyle">
<select name="somename" id="somename">
<option value="Value1">
<option value="Value2">
</select>
</div>
Is it possible to style the select element in the div with class "mystlye" without setting the class on the select? I would like the select element to be styled only if it's contained in a div that has a class of "mystyle".
Something like this:
div.mystyle {
border: 1px solid #ff0000;
background-color: #ffeeee;
}
div.mystyle.select {
margin: 0px 5px 10px 0px;
}
Change the dot to a space in your div.mystyle.select selector. select is a tag not a class.
div.mystyle {
border: 1px solid #ff0000;
background-color: #ffeeee;
}
div.mystyle select {
margin: 0px 5px 10px 0px;
}
Demo: http://jsfiddle.net/LftRc/
Using a space says it has to be a child.
.mystyle select { }
Using the > operator means a direct child (e.g.., not a .select inside a div inside a div inside .mystyle).
.mystyle > select { }
You can also use "pseudo-elements" and "pseudo-classes" on the parent.
.mystyle:hover select { /* The .select element when .mystyle is hovered over */ }
It leads to some interesting results when used correctly.