ok, this may sound pretty easy, yet i cannot find the css responsible for the blue border in this select dropdown button by bootstrap
does anyone have a clue how i can get the class in the css file?
<form action="#" method="post" id="demoForm" class="demoForm">
<!--<fieldset>-->
<select class="selectpicker" name="category">
<option value="AFR">Afrika</option>
<option value="CA">Amerika (Mitte) & Karibik</option>
<option value="NA">Amerika (Norden)</option>
</select><br/>
<select class="selectpicker" name="choices" id="choices">
<option value="ae">Äthiopien</option>
<option value="bo-mo-si">Botswana, Mosambik & Simbabwe</option>
<option value="ma-ma-sey">Madagaskar, Mauritius & Seychellen</option>
<option value="nam">Namibia</option>
<option value="na">Nordafrika (Küste)</option>
<option value="na-l">Nordafrika (Landesinneres) & Sahara</option>
<option value="ka">Kamerun</option>
<option value="ke">Kenia & Tansania</option>
<option value="ma">Mali</option>
<option value="ru-ug">Ruanda & Uganda</option>
<option value="sa">Südafrika</option>
<option value="wa">Westafrika</option>
</select>
<!-- </fieldset>-->
</form>
http://jsfiddle.net/49FK9/90/
Make outline: none for .dropdown-toggle and .dropdown li a.
.demoForm .bootstrap-select .dropdown-toggle:focus,
.demoForm .bootstrap-select.btn-group .dropdown-menu li a {
outline: none !important;
}
.demoForm .bootstrap-select .dropdown-toggle:focus,
.demoForm .bootstrap-select.btn-group .dropdown-menu li a {
outline: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://the-backpacker.net/scripts/js/bootstrap-select.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://the-backpacker.net/scripts/css/bootstrap-select.css" rel="stylesheet"/>
<form action="#" method="post" id="demoForm" class="demoForm">
<!--<fieldset>-->
<select class="selectpicker" name="category">
<option value="AFR">Afrika</option>
<option value="CA">Amerika (Mitte) & Karibik</option>
<option value="NA">Amerika (Norden)</option>
</select><br/>
<select class="selectpicker" name="choices" id="choices">
<option value="ae">Äthiopien</option>
<option value="bo-mo-si">Botswana, Mosambik & Simbabwe</option>
<option value="ma-ma-sey">Madagaskar, Mauritius & Seychellen</option>
<option value="nam">Namibia</option>
<option value="na">Nordafrika (Küste)</option>
<option value="na-l">Nordafrika (Landesinneres) & Sahara</option>
<option value="ka">Kamerun</option>
<option value="ke">Kenia & Tansania</option>
<option value="ma">Mali</option>
<option value="ru-ug">Ruanda & Uganda</option>
<option value="sa">Südafrika</option>
<option value="wa">Westafrika</option>
</select>
<!-- </fieldset>-->
</form>
Add outline:none to .dropdown-menu.
.dropdown-menu a:focus { outline: none; }
Related
i am trying to chaneg the colour of text using twitter-bootstrap but something is wrong it is not working.
here is my code:
<select name="number" '<?=htmlspecialchars($s['number'])?>'td>"
<option><?=htmlspecialchars($s['number'])?></option>
<option class="text-cuccess">Tak</option>
<option class="text-danger">Nie</option>
</select>
.newcolor {
color:red;
}
.newcolor1{
color:green;
}
<select id="select" onchange="this.className=this.options[this.selectedIndex].className">
<option style="color:gray" value="null">select one option</option>
<option value="1" class="newcolor">one</option>
<option value="2" class="newcolor">two</option>
<option value="2" class="newcolor1">two</option>
</select>
<select class='ui selection dropdown' name='YearLevel' style="display:none" id='YearLevel'>
<option value=''>Year Level</option>
<option value='II'>I</option>
<option value='II'>II</option>
<option value='III'>III</option>
<option value='IV'>IV</option>
</select>
<style>
select#YearLevel{
display:none !important;
}
</style>
I tried everything I know but it just wouldn't work.
My fiddle is here. It is based on answers to this post.
It is a simple selectpicker with icons instead of text.
I'd like users to be able to select an icon from a list. However, since there is a large number of very small icons, I'd like to have them display in a 2D table/grid/matrix within the dropdown (currently it shows one icon per row) . The number of columns within the table should scale based on the page width.
I picture it as a simple colorpicker with icons instead of colors.
I'm willing to use a different control, if not a bootstrap-selectpicker.
Here's an example using Bootstrap-Select: change the dropdown-menu list to display inline-block while removing the float. Then you can set a width and any other styling you may need.
Working Example:
$('select').selectpicker();
.bootstrap-select .dropdown-menu {
padding: 5px;
}
.bootstrap-select .dropdown-menu > li {
position: relative;
display: inline-block;
float: none;
text-align: center;
width: 20%;
}
#media (min-width: 768px) {
.bootstrap-select .dropdown-menu > li {
width: 10%;
}
.bootstrap-select .dropdown-menu > li > a {
font-size: 22px;
}
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<div class="container">
<label class="control-label" for="icon">Select icon</label>
<select class="form-control selectpicker" id="icon" name="icon" required>
<option value=9784>☸</option>
<option value=9785>☹</option>
<option value=9786>☺</option>
<option value=9787>☻</option>
<option value=9788>☼</option>
<option value=9789>☽</option>
<option value=9790>☾</option>
<option value=9791>☿</option>
<option value=9792>♀</option>
<option value=9793>♁</option>
<option value=9794>♂</option>
<option value=9795>♃</option>
<option value=9796>♄</option>
<option value=9797>♅</option>
<option value=9798>♆</option>
<option value=9799>♇</option>
<option value=9800>♈</option>
<option value=9801>♉</option>
<option value=9802>♊</option>
<option value=9803>♋</option>
<option value=9804>♌</option>
<option value=9805>♍</option>
<option value=9806>♎</option>
<option value=9807>♏</option>
<option value=9808>♐</option>
<option value=9809>♑</option>
<option value=9810>♒</option>
<option value=9811>♓</option>
<option value=9812>♔</option>
<option value=9813>♕</option>
<option value=9814>♖</option>
<option value=9815>♗</option>
<option value=9816>♘</option>
<option value=9817>♙</option>
<option value=9818>♚</option>
<option value=9819>♛</option>
<option value=9820>♜</option>
<option value=9821>♝</option>
<option value=9822>♞</option>
<option value=9823>♟</option>
<option value=9824>♠</option>
<option value=9825>♡</option>
<option value=9826>♢</option>
<option value=9827>♣</option>
<option value=9828>♤</option>
<option value=9829>♥</option>
<option value=9830>♦</option>
<option value=9831>♧</option>
<option value=9832>♨</option>
<option value=9833>♩</option>
<option value=9834>♪</option>
<option value=9835>♫</option>
<option value=9836>♬</option>
<option value=9837>♭</option>
<option value=9838>♮</option>
<option value=9839>♯</option>
<option value=9840>♰</option>
<option value=9841>♱</option>
<option value=9842>♲</option>
<option value=9843>♳</option>
<option value=9844>♴</option>
<option value=9845>♵</option>
<option value=9846>♶</option>
<option value=9847>♷</option>
<option value=9848>♸</option>
<option value=9849>♹</option>
<option value=9850>♺</option>
<option value=9851>♻</option>
<option value=9852>♼</option>
<option value=9853>♽</option>
<option value=9854>♾</option>
<option value=9855>♿</option>
<option value=9856>⚀</option>
<option value=9857>⚁</option>
<option value=9858>⚂</option>
<option value=9859>⚃</option>
<option value=9860>⚄</option>
<option value=9861>⚅</option>
<option value=9862>⚆</option>
<option value=9863>⚇</option>
<option value=9864>⚈</option>
<option value=9865>⚉</option>
<option value=9866>⚊</option>
<option value=9867>⚋</option>
<option value=9868>⚌</option>
<option value=9869>⚍</option>
<option value=9870>⚎</option>
<option value=9871>⚏</option>
<option value=9872>⚐</option>
<option value=9873>⚑</option>
<option value=9874>⚒</option>
<option value=9875>⚓</option>
<option value=9876>⚔</option>
<option value=9877>⚕</option>
<option value=9878>⚖</option>
<option value=9879>⚗</option>
<option value=9880>⚘</option>
<option value=9881>⚙</option>
<option value=9882>⚚</option>
</select>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
You can apply col-md-6 (or however many you want per line) to each of your dropdown items, just as you would with any other element.
sample
<div class="btn-group">
<ul class="nav pull-right">
<li class="dropdown">
Icon x2 Menu <b class="caret"></b>
<ul class="dropdown-menu" id="icons"><li class="dropdown-header">Glyphicons</li>
<li class="pickList col-md-6 text-center" value="Icons.Glyphicons.adjust"><i class="glyphicon glyphicon-adjust"></i></li>
<li class="pickList col-md-6 text-center" value="Icons.Glyphicons.align_center"><i class="glyphicon glyphicon-align-center"></i></li>
<li class="pickList col-md-6 text-center" value="Icons.Glyphicons.align_justify"><i class="glyphicon glyphicon-align-justify"></i></li>
<li class="pickList col-md-6 text-center" value="Icons.Glyphicons.align_left"><i class="glyphicon glyphicon-align-left"></i></li>
<li class="pickList col-md-6 text-center" value="Icons.Glyphicons.align_right"><i class="glyphicon glyphicon-align-right"></i></li>
<li class="pickList col-md-6 text-center" value="Icons.Glyphicons.arrow_down"><i class="glyphicon glyphicon-arrow-down"></i></li>
<li class="pickList col-md-6 text-center" value="Icons.Glyphicons.arrow_left"><i class="glyphicon glyphicon-arrow-left"></i></li>
<li class="pickList col-md-6 text-center" value="Icons.Glyphicons.bell"><i class="glyphicon glyphicon-bell"></i></li>
</ul>
</li>
</ul>
</div>
I have a <select> and want the first option to be invisible since there is not enough space for the text on the mobile version and it gets chopped off anyway so I resolved to just make it disappear but it wont work. Only with the rest of the options (on PC browsers) but not for the first one. Why is that?
This is what I've already tried
CSS:
option:first-child {
color: transparent;
}
HTML:
<select>
<option value="">Please select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Thank you.
option:first-child{
display: none;
}
<select>
<option disabled value>Please select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
using javascript (best way)
(function(){
document.getElementById("first").text = "";
})()
<select id="mySelect">
<option value id="first">Please select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
if you want to hide first option only in mobile, then follow this
(function(){
var window_width = $(window).width();
if(window_width < 480){
document.getElementById("first").text = "";
}
})()
<select id="mySelect">
<option value id="first">Please select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<p>This will hide only in mobile screen</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
You can set it to display: none; only issue is, it won't work in Internet Explorer (surprise!)
Or just leave the <option> empty...
I think you don't really need to add any css for this reason. If you need to the first option to be blank, then remove Please Select .i.e.,
<select>
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
If you want some spacing will be there inside the box even though text is removed you can just add a few times to make look the panel wide enough as show below.
<select>
<option value=""> </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Here is a working pluncker for you. Change it to display:none and add select to the CSS
OR
You can use visibility: hidden; instead of display:none in CSS
select option:first-child {
display:none;
}
<select>
<option value="">Please select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
jQuery.fn.toggleOption = function(show) {
jQuery(this).toggle(show);
if (show) {
if (jQuery(this).parent('span.toggleOption').length)
jQuery(this).unwrap();
} else {
if (jQuery(this).parent('span.toggleOption').length == 0)
jQuery(this).wrap('<span class="toggleOption" style="display:none;" />');
}
};
You can use media query to handle small devices and phones:
/* you can set any width you want */
#media (max-width: 400px) {
select option:first-child {
display: none;
}
}
<select>
<option style="display:none;">Please select</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
Thanks... :)
For the first time i needed to restyle some dropdown select menu's. Only they leave me with a problem.
I can't seem to get them lined up with the submit image. Anyone got any tips? Maybe i'm overlooking something simple.
<body>
<div class="filterbalk">
<form>
<label>
<select style="width: 250px;">
<option>Woningtype</option>
</select>
</label>
<label>
<select style="width: 250px;">
<option>Plaats</option>
</select>
</label>
<label>
<select style="width: 90px;">
<option value="0">Prijs van</option>
<option value="0">0</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
<option value="500">500</option>
<option value="600">600</option>
<option value="700">700</option>
<option value="800">800</option>
<option value="900">900</option>
<option value="1000">1000</option>
</select>
</label>
<label>
<select style="width: 90px;">
<option value="1000000000">Prijs tot</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
<option value="500">500</option>
<option value="600">600</option>
<option value="700">700</option>
<option value="800">800</option>
<option value="900">900</option>
<option value="1000">1000</option>
<option value="1000000000">1000+</option>
</select>
</label>
<input type="image" src="http://www.wauwwebdesign.nl/problem/buttonFilter.jpg" value="Filter" id="submit">
</form>
</div>
Both HTML and CSS can be found in the fiddle. I can't seem to paste the CSS here.
http://jsfiddle.net/5FcLf/
I think all you need to add is
#submit {
display: inline-block;
vertical-align: top;
}
JSFiddle
Then tweak...