the style of parent looks like
.ac-container input {
display: none;
}
I want to override in the following HTML5 part
<form>
<fieldset>
<input type="radio" name="Displayedchart" value="Normal" id="normalRadioButton"class="options"/>Normal<br />
<input type="radio" name="Displayedchart" value="Rates" id="rateRadioButton" class="options"/>Rates<br />
</fieldset>
</form>
so I did the following which fail ,
#normalRadioButton .options {
display: !important;
}
Any idea how to fix that?
#normalRadioButton.options {
display: inline-block;
}
Remove whitespace between #normalRadioButton and .options
Use Cascade otherwise !important, more cascade have more importance:
.ac-container #normalRadioButton.options {
display: inline-block;
}
See this question:
I don't think it's possible.
Instead of hiding the parent you'll want to hide all of the parent's children except the one.
Also, you'll want to add a space between these two attributes:
id="normalRadioButton"class="options"
Related
style:
.airport-selections {
margin-top: 10px;
.airport-input {
width: 200px;
}
}
html:
<div class="airport-selections">
<label class="airport-label" for="airport-from">
Departure:
</label>
<input type="text" class="airport-input">
</div>
If I don't nest them, the width of the input is set to 200. This also happens with all of the styles on the page.
Your CSS is invalid, there is no such thing as nesting in CSS. Only Less or Sass, but you have a long way until then.
If you want to select elements from inside others, use
.father .child{
yourstyle
}
All elements with class child from inside all elements with class father will get the style applied to them.
.airport-selections {
margin-top: 10px;
}
.airport-input {
width: 200px;
}
/*or
.airport-selections .airport-input {
width: 200px;
}
*/
<div class="airport-selections">
<label class="airport-label" for="airport-from">Departure:</label>
<input type="text" class="airport-input">
</div>
Without a CSS precompiler, there's no such thing as nested CSS styles.
Check out SASS, or LESS for nesting and other options. But what you have there doesn't do what you think it does.
I'm attempting to add a search field to a responsive sidebar, and want the field to responsively scale to the width of the sidebar, while keeping the 'submit' button at a set width, on the same line as the search field.
I've been able to mock up the effect with divs, but when applying the same styles to the form elements, the search field will always fill the full width of the form element:
http://dabblet.com/gist/5618200
I am aware that I can get this to work with percentages:
http://dabblet.com/gist/5618209
But I really would like the 'submit' button to have a set width.
What can I do to make the form behave -exactly- like the div mockup in my first example?
Not getting your question well, but do you want the text box to be width 100% and a fixed button like this?
Demo
<input type="submit" value="Search" />
<div>
<input type="text" />
</div>
input[type=submit] {
float: right;
}
input[type=text] {
width: 100%;
}
div {
overflow: hidden;
padding-right: .5em;
}
Here is a fully functional solution.
<form>
<div class="form-element textfield">
<input type="text">
</div>
<div class="form-element submit-btn">
<input type="submit" value="Search">
</div>
</form>
And the styles:
.form-element {
display: table-cell;
box-sizing: border-box;
}
.textfield {
width:100%
}
.textfield > input {
width:100%
}
Here is the example:
http://codepen.io/capynet/pen/vJBnL
I'm trying to build a search form using Bootstrap. Here's the HTML:
<form class="form-search search-bar">
<div class="input-append">
<input type="text" class="search-query" placeholder="Enter your address here...">
<button type="submit" class="btn btn-primary">
Search <i class="icon-search icon-white"></i></button>
</div>
</form>
I'm new to CSS - how do I style this so that the search elements are horizontally centered across the block? Also, how do I increase the height of the search elements?
You should add an ID
.search-bar {
text-align: center; /* centers inline and inline-block children */
}
.search-bar .search-query,
.search-bar .btn-primary {
display: inline-block; /* allows for heights to be set */
}
.search-bar .search-query {
height: 30px;
}
.search-bar .btn-primary {
height: 40px;
}
to place them next to eachother you can use the float command
.search-query {
float:left;
}
.btn-primary {
float:left;
}
Make sure the width of input-append is large enough to place them next to eachother.
to increase there height just place height:[amount]; in the same block as float in the CSS
Is there any way to have a label respond to focus. I have some code where the textfield has a different style on focus. The label also however needs a slightly different style. I tried this but it did not effect the label.
#header .search label {
background:url(http://www.golfbrowser.com/images/icons/search.png) left top no-repeat;
padding-left:20px;
height:20px;
float:right;
}
#header .search label:focus {
background:url(http://www.golfbrowser.com/images/icons/search-z.png) left top no-repeat;
padding-left:20px;
height:20px;
float:right;
}
#header .search input {
padding:0px;
border:0px;
width:140px;
height:20px;
float:left;
padding-right:10px;
background:url(http://www.golfbrowser.com/images/icons/searchbar.png) right top no-repeat;
}
#header .search input:focus {
padding:0px;
width:190px;
height:20px;
float:left;
padding-right:10px;
background:url(http://www.golfbrowser.com/images/icons/searchbar-z.png) right top no-repeat;
}
The label contains an image and the other part of a round corner and it too must change colour in order for the field to look correct.
Any ideas,
Marvellous
You can't actually give focus to a label. It's not a focusable form element. Besides, even if you could do that, then whatever previously had focus (that means your input) would lose it to the label anyway.
You may have to restructure your HTML (and modify your CSS accordingly) so that you can select input:focus and then that input's corresponding label. For instance, if you moved your label after your input and used the following CSS selector for your label, you should be able to accomplish what you want.
#header .search input:focus + label
BoltClock's answer is the more semantic, lightweight way of achieving this functionality. However it's not always possible to have a specific HTML structure (especially to facilitate a minor feature like this) and CSS lacks the ability to traverse up the HTML hierarchy. To get around that, here are two alternatives. The first is coming soon (CSS spec 4) and the second is our old mate Javascript.
First up, CSS4's :focus-within pseudo selector. This does exactly what it says on the tin (scopes based on any child element's active focus state). Read more about the spec here. So assuming you have a HTML structure of:
<div class="input-wrapper">
<label for="elem">Label Text
<input name="elem" id="elem" type="text" />
</label>
</div>
you could scope the 'focussed' label by simply:
label:focus-within{}
by the same token, you could also scope the parent div with:
div.input-wrapper:focus-within{}
Magical. But not for use today :(
Second up, if you're already using a JS selector engine (i.e. jQuery, Sizzle, etc.), you could also do something along the lines of:
$('input').on("focus", function(){
var input = $(this);
// assuming label is the parent, i.e. <label><input /></label>
var label = $(this).parent();
label.addClass('focussed');
input.on("blur", function(){
label.removeClass('focussed');
input.off("blur");
});
});
This is untested but the essence of what this achieves is using a class rather than the :focus pseudo selector. So you can add your focussed styles to label.focussed{}. I've added (and self-removed) the blur handler to facilitate removing the class.
Now using Flex box will solve this. Have the label element follow the input element in the HTML. Then use flex-direction: column-reverse to change its position to appear above the input element. You can then use the input:focus + label: {} to target the label.
.input-container {
display: flex;
flex-direction: column-reverse;
}
.input-container > input {
/* your input styles */
}
.input-container > input:focus + label {
/* targets the label when the input receives focus */
color: red;
}
<div class="input-container">
<input type='email' />
<label>Email</label>
</div>
use:checked instead of :focus and you must give id,name,value into 'input'.
Found a good solution - order property made a trick:
input:focus {
background-color: #F2FFF0;
}
* {
font-family: "Arial";
font-size: 13px;
}
div.settings {
display:grid;
grid-template-columns: max-content max-content;
grid-gap: 7px
}
div.settings label {
text-align:right;
padding-top: 3px
}
div.settings label:after {
content: ":";
}
div.settings input:focus + label:before {
content: "\25B6 ";
font-size: 12px;
color: red;
}
input {
border: 1px solid #ccc;
padding: 2px 4px;
font-size: 13px;
}
<div class="settings">
<input style="order:2" type="text" title="(vardas, pavardė ir pan.)" autocomplete="off" id="name" name="name" required minlength="4" maxlength="128" size="50"><label style="order:1" for="name">Pirkėjas</label>
<input style="order:4" type="text" title="" autocomplete="off" id="company" name="company" required minlength="4" maxlength="128"><label style="order:3" for="company">Įmonės pavadinimas</label>
<input style="order:6" type="text" title="" autocomplete="off" id="companyCode" name="companyCode" required minlength="4" maxlength="128"><label style="order:5; min-width: 160px" for="companyCode">Įmonės (asmens) kodas</label>
</div>
I don't have experience as a web designer, but in effort to learn more about CSS, I'm doing the stylesheet for my own page. I am aware the way I'm doing it now probably sucks, is not the recommended way, but please help me understand why this isn't working.
I have this form:
<form action="/register" method="POST" id="registration_form">
<p>
<label for="username">Username</label>
<input type="text" id="username" name="username"/>
</p>
<p>
<label for="password">Password</label>
<input type="password" id="password" name="password"/>
</p>
</form>
I have included Eric Meyer's CSS reset, before including my own stylesheet, and I have this rule in my CSS:
#registration_form label {
width: 100px;
}
I also tried to put:
label {
width:100px;
}
I tried changing the value to more than 100px, but still it doesn't get applied. If it helps, I have a layout, which contains something like this:
<body>
<div id="navigation">
...
</div>
<div id="pagebox">
{% block body %}{% endblock %}
</div>
</body>
This is a jinja2 template, and the content of body is added by some different view, when it's rendered. Here are the styles for these id's:
#navigation {
text-align:center;
}
#navigation ul li {
display:inline;
margin-left:50px;
}
#pagebox {
margin-left:50px;
margin-right:50px;
height:600px;
background-color: #20f000;
}
Why isn't my label style getting applied?
I believe that <label> has the display:inline by default, so width and height do not affect it. Try adding display: inline-block to it.
Added: As member Geoff Adams noted in the comments, there are some browser compatibility issues with display: inline-block. In this specific scenarion it should work, but see here for more information.
The label element is an inline element, so the width style doesn't apply to it.
You could make the label and input element float inside the p elements. Applying overflow to the p element makes it work as a container for the floating elements:
#registration_form p {
overflow: hidden;
}
#registration_form p label {
float: left;
width: 100px;
}
#registration_form p input {
float: left;
}