Hide text after div using css - html

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>

Related

Is it possible to use combinators with select > option elements? [duplicate]

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>

Add text to bootstrap select input in same line

I'm trying to add an asterisk to the select input field, I can easily do if I give the my css but my condition is to use bootstrap 3.3.7 or lesser version and display the asterisk on the same line screenshot.
<style>
.asterik-span{
color: red; font-family: bold; font-size: 16px;
}
.select-diag{
width:90%;border:1px solid #ddd; border-radius:3px;height:32px;
}
</style>
html
<select class="select-diag">
<option >Value1</option>
<option >Value2</option>
<option >Value3</option>
</select>
<span class='pull-right asterik-span'>*</span>
Jsfiddle
To use bootstrap only you can do this
<div class="input-group">
<select class="form-control">
<option>Value1</option>
<option>Value2</option>
<option>Value3</option>
</select>
<div class="input-group-addon">
<span class='asterik-span'>*</span>
</div>
</div>

Placing DIV in form, can't set minimum width and height

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>

Remove arrows from form element select in Bootstrap 3

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;
}

Select and link in one line

I want to set select and link in one line, but select is upper.
<div data-role="fieldcontain">
<a id="back" href='#' data-role="button" data-inline="true" class="ui-btn-left" data-theme="b" data-icon='arrow-l'>Back</a>
<select name="menu" id="menu" data-inline="true" data-theme="b" data-native-menu="false">
<option value="menu" selected="true">Menu</option>
<option value="index.html">Home</option>
<option value="services.html">Services</option>
<option value="technology.html">Technologies</option>
<option value="how_we_work.html">How we work</option>
<option value="about.html">About Us</option>
<option value="careers.html">Careers</option>
<option value="contacts.html">Contacts</option>
</select>
</div>
What can I do?
Thanks
It works fine for me in FF8. What browser are you using?
Try setting your <select> to display: inline in your CSS. The <a> is inline by default, so doesn't need setting.
select#menu {
display: inline;
}