I can use CSS pseudo-classes, without JavaScript, to show a hidden element based on a radio box's selection, e.g. https://stackoverflow.com/a/44036088/575530
Is there a CSS pseudo-class I can use with <select> to achieve the same effect, i.e. to change the display: from none to block on a different element?
In the near future it's will be possible using :has()
img {
width: 250px;
display: none;
}
select:has([value="dog"]:checked) ~ img.dog,
select:has([value="wolf"]:checked) ~ img.wolf,
select:has([value="lioness"]:checked) ~ img.lioness{
display:block;
}
<select name="animal">
<option value="">--Please choose an option--</option>
<option value="dog">Dog</option>
<option value="wolf">Wolf</option>
<option value="lioness">Lioness</option>
</select>
<img src="https://picsum.photos/id/582/600/400" class="wolf" alt="A wolf">
<img src="https://picsum.photos/id/1074/600/400" class="lioness" alt="A lioness">
<img src="https://picsum.photos/id/237/600/400" class="dog" alt="A Dog">
Related
I have a select box like
But when I use the select box in css, it looks like below
how to get the large option box and width have to cover upto text.
You can just add it in the css file.
HTML:
<div >
<select>
<option value="0">Select:</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>
</div>
And in css you add:
select, option {
width: 250px;
}
This is part of my code. I'm trying to work with drop down. I'm unable to select the drop down items. If I removed the line style="padding: 80px;" at the last <span> element, it works well. But I need that line for alignment. This is Fiddle
<input type="text" name="city" maxlength=20 size=15/>
<span style="padding: 10px;"></span>
<select>
<option value="0" selected>Please Select</option>
<option value="tamilnadu">Tamilnadu</option>
<option value="kerala">Kerala</option>
<option value="karnataka">Karnataka</option>
</select>
<span style="line-height:20px"> City </span>
<span style="padding: 80px;"> State/Province </span>
Can you please tell what is the problem in this code. Why padding: 80px; causes the problem?
You need to toggle with z-index.
See : http://jsfiddle.net/3xBPL/7/
<select style="z-index:999; position:absolute">
<option value="0" selected>Please Select</option>
<option value="tamilnadu">Tamilnadu</option>
<option value="kerala">Kerala</option>
<option value="karnataka">Karnataka</option>
</select>
<span style="padding:80px; z-index:1;"> State/Province </span>
Reason : The span area is overlapping the select box
instead of padding:80px try giving padding-left:80px. Because the padding of the element overlapping the <Select>
http://jsfiddle.net/3xBPL/9/
I think problem is in your span cause span start from the top. It overlapping the drowdown box.
Please checck JSFIDDLE
I am editing this code -
<input type="text" name="city" maxlength=20 size=15/>
<span style="padding: 10px;"></span>
<select>
<option value="0" selected>Please Select</option>
<option value="tamilnadu">Tamilnadu</option>
<option value="kerala">Kerala</option>
<option value="karnataka">Karnataka</option>
</select>
<br>
<span style="line-height:20px"> City </span>
<!--<span style="padding:80px; border:1px #cccccc solid;"> State/Province </span> -->
<span style="padding:0px 80px 80px 80px;"> State/Province </span>
Please use -
padding:0px 80px 80px 80px;
The padding:80px is definitely the problem.
Here's a screencap of Firebug: http://screencast.com/t/ISPMaYkyK1
Here's a JSFiddle of the solution: http://jsfiddle.net/jrconway3/4gVUn/
In the screenshot, you can see that the padding is causing your span to cover up the two input boxes. The span is an inline element, so some padding will work depending on the circumstances, but it still tries to line up with the other items. The vertical padding does not work because technically, all your current items are on the same line.
padding-left: 80px;
You can specify "padding-left" to ONLY set left padding. This will fix it so you can properly click on the items. Changing the z-index on different elements will set certain elements to have priority over others, making them appear "over" other elements. But that doesn't solve the root of the problem.
Others have already answered the question, but I already started writing so I decided I'd finish it anyway.
your code has overlap with your drop down
i put it in fiddle
also i give it a color to make it more visible , try to add some new <br> to see how it goes around
span{
background-color:red;
}
its because, with padding 80px, you will expand the span, and when you click dropdown, website say "the one that clicked is span, not dropdown, so dropdown wont viewed"
you can add border by doing this.. it will explain to you more clearly
<span style="padding:80px;border:1px solid black"> State/Province </span>
what do you expect with that span using padding:80px by the way?
i have two divs search and demo. And div demo is
hidden {
display: none
}
and onClick of button
i want to show div demo, whose content is loaded onClick event. Although div demo appears but on right of search div. i want it below search div.
Here is my code:
<div id= search>
<div class="recruitment_input">
<span style="margin-top:6px;">Search<sup> </sup>:</span>
<select id="requesttype" class="select_option">
<option value="none">--Select Search--</option>
<option value="design">Department</option>
<option value="development">First Name</option>
<option value="other">Employee ID</option>
</select>
</div>
</div>
<div id=demo></div>
EXAMPLE HERE
I believe this is what you are trying to accomplish. The $('#requesttype').on('change') method could be replaced with a $('button').on('click') method as well. Please let me know if you have any questions.
Modify with CSS?
<style type="text/css">
div#demo {
position: absolute;`
margin-left:50%;
left:-200px;
width:400px;
height: 400px;
background-color: green;
}
</style>
Hope this what you are looking for:-
HTML
<button id="show">Show</button><br/><br/>
<div id= search>
<div class="recruitment_input">
<span style="margin-top:6px;">Search<sup> </sup>:</span>
<select id="requesttype" class="select_option">
<option value="none">--Select Search--</option>
<option value="design">Department</option>
<option value="development">First Name</option>
<option value="other">Employee ID</option>
</select>
</div></div>
<div class="clear"></div><!--clear class will show your demo div down, even you have used any floating above-->
<div id='demo'>your demo box</div>
CSS
#demo{display: none;}
.clear{clear:both;}
Javascript:
$("#show").click(function(){
document.getElementById("demo").style.display = "block";
});
Here is Fiddle
Add style to your search div.
i.e.
Make <div id='search'>
as <div id='search' style='float:left'>
Then this will place your demo is apper right side of the search div
Consider the following code:
<div data-role="fieldcontain">
<label for="name">Car</label>
<select data-inline="true" data-theme="b">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<span>message</span>
</div>
The output as follows:
There is a big gap between the component and the message. How can I reduce this gap to a desired amount?
(I tried applying CSS such as width:100px to the component, but no success)
EDIT :
Here is the live demo: http://jsbin.com/icikif/1
The reason can be found in the CSS of jQm:
#media (min-width: 450px)
.ui-field-contain .ui-select {
width: 78%;
display: inline-block;
}
Add a custom Stylesheet and overwrite the width setting.
I'm not sure what you're asking for, but if you want the "message" to be closer to the styled select, add this rule in your CSS:
.ui-field-contain .ui-select {
width: auto !important;
}
just change auto to the desired amount.
I have a form with a drop down list of venues and a submit button.
They are supposed to be on the same line, but since the list of venues is dynamic, it could become too long and push the button down.
I was thinking of setting a max-width property to the select, but I'm not clear whether this will work in all browsers. Do you have any suggestions on a workaround?
<form action="http://localhost/ci-llmg/index.php/welcome/searchVenueForm" method="post" class="searchform">
<select name="venue">
<option value="0" selected="selected">Select venue...</option>
<option value="1">venue 0</option>
<option value="2">club 1</option>
<option value="3">disco 2</option>
<option value="4">future test venue</option>
</select>
<input type="submit" name="" value="Show venue!" class="submitButton" />
</form>
css:
.searchform select {
max-width: 320px;
}
.searchform input.submitButton {
float: right;
}
If the venues are generated on the server side, you can use your server-side scripting to cut them down to a specific maximum character count.
When using pure CSS I'd also try setting overflow:hidden, both on the select and the option elements. Also try setting max-width on the option element. When it works in all non-IE, you can use the usual scripts to add max-width support for IE.
try:
fieldset select {
width: auto;
}