I would like to remove the up/down arrows that show up next to the clock icon on right. Here is the image:
Here is the HTML:
<div class="form-group">
<label class="control-label">Date:</label>
<div class="right-inner-addon ">
<i class="glyphicon glyphicon-time"></i>
<select class="form-control input-lg">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
</select>
</div>
</div>
After applying the suggest css change below this is the result:
Try this using the appearance property:
The appearance property allows you to make an element look like a standard user interface element.
select.form-control {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 1 year ago.
I want to make the text input appear/disappear using select dropdown menu. When the option with value '4' is selected, the text input below should display:block. The code is as follows:
HTML
<div class="parent">
<label for="title">Movie</label>
<select name="title" id="title">
<option value="1" selected>Robocop</option>
<option value="2">Terminator</option>
<option value="3">The Professional</option>
<option value="4">Home Alone</option>
<option value="5">Back to the Future</option>
<option value="6">Forrest Gump</option>
<option value="7">The Notebook</option>
<option value="8">The Good, The Bad, and The Ugly</option>
<option value="9">The Mask</option>
</select>
<input class="test" type="text">
</div>
CSS
.test {
display: none;
}
.parent option[value="4"]:checked ~ .parent > input.test {
display: block;
}
Is it possible or I have been barking under the wrong tree for hours? At the moment JS is not an option. Thanks!
I guess it's not possible without JS at all, but you can achieve your goal with simple Element dataset onchange trick:
select ~ input {
display: none;
}
select[data-chosen='4'] ~ input {
display: inline-block;
}
<div class="parent">
<label for="title">Movie</label>
<select name="title" id="title" onchange="this.dataset.chosen = this.value">
<option value="1" selected>Robocop</option>
<option value="2">Terminator</option>
<option value="3">The Professional</option>
<option value="4">Home Alone</option>
<option value="5">Back to the Future</option>
<option value="6">Forrest Gump</option>
<option value="7">The Notebook</option>
<option value="8">The Good, The Bad, and The Ugly</option>
<option value="9">The Mask</option>
</select>
<input class="test" type="text">
</div>
I have the following html snippet:
<form name="foo">
<fieldset>
<legend>Legend Here</legend>
<label for="the_date">Date: </label><input type="text" name="the_date" id="the_date">
<select class="show_when_needed" id="event_state">
<option value="-1" selected="selected">N/A</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
</select>
<div class="foobar" style="display: inline; border: 1px black; min-width: 20px; min-height: 15px; background: blue;"></div>
<button type="button" name="go_next" id="go_next">Go!</button>
</fieldset>
<hr />
<button type="button" id="save_object">Save Object</button>
</form>
I am trying to have the div show inline, and set a minimum width (to force it to show on screen).
The HTML above is not achieving that goal. How do I correct it so that the div appears alongside the select option control?
[[Additional Info]]
I have tried this on the latest versions of FF and Chrome - both fail to display correctly.
You need to give the element a display: inline-block, you can't set width or height of an inline element because it behaves just like a <span> or a <strong> would, taking only the space it needs.
Take a look at this updated snippet with display: inline-block
change from display: inline; to display: block;.
<form name="foo">
<fieldset>
<legend>Legend Here</legend>
<label for="the_date">Date: </label><input type="text" name="the_date" id="the_date">
<select class="show_when_needed" id="event_state">
<option value="-1" selected="selected">N/A</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
</select>
<div class="foobar" style="display: block; border: 1px black; min-width: 20px; min-height: 15px; background: blue;"></div>
<button type="button" name="go_next" id="go_next">Go!</button>
</fieldset>
<hr />
<button type="button" id="save_object">Save Object</button>
</form>
I'm trying to drop down items that are active, however it doesn't seem to be possible. They want me to move
to this:
so that there is some extra padding on the left. However I canno't seem to target the active state.
html:
<select class="input-select gender-dropdown" id="dwfrm_profile_customer_customergender" name="dwfrm_profile_customer_customergender" style="-webkit-appearance: none;">
<option class="select-option" label="Male" value="1">Male</option>
<option class="select-option" label="Female" value="2">Female</option>
</select>
I found that removiing the -webkit-appearance: none makes it space properly but it also removes the bottom border
Use padding, like this
.input-select {
padding: 6px 24px 6px 12px;
font-size: 16px;
}
<select class="input-select gender-dropdown" id="dwfrm_profile_customer_customergender" name="dwfrm_profile_customer_customergender" style="-webkit-appearance: none;">
<option class="select-option" label="Male" value="1"> Male</option>
<option class="select-option" label="Female" value="2"> Female</option>
</select>
I'm styling a select tag and I wonder if i can take the space on the right, where are the arrows
http://codepen.io/anon/pen/Pqwpdm
<header class="navbar">
<div class="navbar__container">
<select class="navbar__select">
<option class="navbar__option">Janeiro, 2015</option>
<option class="navbar__option">Fevereiro, 2015</option>
<option class="navbar__option">Março, 2015</option>
<option class="navbar__option">Abril, 2015</option>
<option class="navbar__option">Maio, 2015</option>
<option class="navbar__option">Junho, 2015</option>
<option class="navbar__option">Julho, 2015</option>
<option class="navbar__option">Agosto, 2015</option>
<option class="navbar__option">Setembro, 2015</option>
<option class="navbar__option">Outubro, 2015</option>
<option class="navbar__option">Novembro, 2015</option>
<option class="navbar__option">Dezembro, 2015</option>
</select>
</div>
</header>
.navbar__select {
float: right;
background: #C9D3DD;
font-size: 17px;
border: 0;
border-radius: 0;
-webkit-appearance: none;
padding: 5px;
}
Thanks! :).
This question has already been asked.
To recap:
Use -moz-appearance: none to disable the dropdown arrow in Firefox
Use -webkit-appearance: none to disable the dropdown arrow in Webkit browsers (such as Google Chrome)
Set display: none on the psudo class available for the dropdown arrow in Internet Explorer: ::-ms-expand
Here is my Div:
<div id="show" class="dataTables_length">
Show
<select size="1" name="show_length">
<option value="10" selected="selected">10</option>
<option value="20">25</option>
<option value="30">50</option>
<option value="40">100</option>
</select>
entries
</div>
I want to hide this show and entries text how should I hide this using css? Not using javascript or jquery.
.someClass {
display: none;
}
Tried this? I am sure this would do it!
Where it would be this:
<span class="someClass">Show</span>
<!-- select statement here -->
<span class="someClass">Enteries</span>
I thought you wanted to hide whole of it!
Try this:
<div id="show" class="dataTables_length">
<span class="hidden">Show</span>
<select size="1" name="show_length">
<option value="10" selected="selected">10</option>
<option value="20">25</option>
<option value="30">50</option>
<option value="40">100</option>
</select>
<span class="hidden">entries</span>
</div>
With CSS:
span.hidden {
display: none;
}
Despite so many answers and comments, you don't seem to be ready to accept the fact that the text needs to be wrapped in span. And that too using only css!
So, you can do a faux hide like this: http://jsfiddle.net/abhitalks/R7Yt4/1/
CSS:
div#show {
background-color: #ccc;
color: #ccc;
}
div#show::selection {
color: #ccc;
}
div#show > select {
color: #fff;
}
You can warp a span around the items you want to hide, and the hide this.
For example
<span class="hide">Show</span>
and css:
.hide{display:none;}
Your full html will look like this:
<div id="show" class="dataTables_length">
<span class="hide">Show</span>
<select size="1" name="show_length">
<option value="10" selected="selected">10</option>
<option value="20">25</option>
<option value="30">50</option>
<option value="40">100</option>
</select>
<span class="hide">entries</span>
</div>
<div id="show" class="dataTables_length">
<span style="visibility:hidden">Show </span>
<select size="1" name="show_length">
<option value="10" selected="selected">10</option>
<option value="20">25</option>
<option value="30">50</option>
<option value="40">100</option>
</select>
<span style="visibility:hidden"> entries </span>
</div>