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>
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 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.
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>
This question already has answers here:
Why do the :before and :after pseudo-elements require a 'content' property?
(5 answers)
Closed 7 years ago.
I want to add a help logo at the end of some form fields which opens a tooltip.
Everything is working, but the .helptip icon (http://img1.wsimg.com/shared/img/1/small-help-icon.gif) is coming on the left(merged) with the text. I actually want in on the right of span text, so I did .help-tip:after. But then nothing shows up at all.
Can you spot what's wrong?
<div class="advancedSearchFormSelectField fclear">
<span id="view_format_mis" class="advancedSearchFormlabel help-tip"> Include Columns in Result Set </span>
<select class="advancedSearchFormSelectBox" id="filters_include_columns" multiple="multiple" name="filters[include_columns][]">
<option value="x">X</option>
<option value="y">Y</option>
<option value="z">Z</option>
</select>
</div>
<div class="advancedSearchFormSelectField fclear">
<span id="view_format_mis" class="advancedSearchFormlabel"> Sort Column </span>
<!--No help tip here -->
<select class="advancedSearchFormSelectBox" id="filters_sort_columns" multiple="multiple" name="filters[sort_columns]">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
.help-tip {
/* Merged text at the moment. .help-tip:after not working */
cursor: pointer;
width: 10px;
height: 10px;
background-repeat: no-repeat;
background-image: url("/assets/small-help-icon.gif");
}
.advancedSearchFormSelectField{
width:300px;
margin: 5px;
height: 60px;
float:left;
}
You don't seem to be using a pseudo-element at the moment. Try this setting .help-tip to .help-tip::after and giving is content: "" and display: inline-block:
.help-tip::after {
content: "";
display: inline-block;
cursor: pointer;
width: 10px;
height: 10px;
background-repeat: no-repeat;
background-image: url("/assets/small-help-icon.gif");
}
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;
}