I have html code that I cannot change.
I cannot use JS for help. So the only option is CSS. example here:
https://jsfiddle.net/4gKPL/
HTML:
<!-- code for input -->
<div class="form-group complete">
<label>label for text input</label>
<input type="text"/> <span class="error-message">This is an error message</span>
</div>
<!-- code for dropdown -->
<div class="form-group complete">
<label>label for select input</label>
<div class="custom-selectbox custom-selectbox-form">
<select name="sth" required>
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
</select> <span class="selectedValue"> </span>
<span class="is-visually-hidden">select to open the list</span>
</div> <span class="error-message">This is an error message</span>
</div>
CSS:
.complete:after {
content:'OK';
}
I need to display additional content (in this example 'OK') for input fields but not for select.
Spans after interactive components are optional so don't have to exist.
Any idea about how define this selector?
Since you can't use :after on input elements, all I can think of is a really hackish solution: select the element following and insert a :before pseudo element in front of it.
.complete input[type="text"] + .error-message:before {
content:'OK';
}
See this jsFiddle for a working example.
EDIT
The .error-message element's not always being present throws a wrench in this plan. You can make an unprefixed call to :before (+ :before), but then if the following element is hidden in some way, so will your OK message. And even if it is present, it picks up the styles of the element following. See this updated jsFiddle.
I'll leave this idea up so people can see it, but it doesn't look like it will work for your purposes.
Related
So there seems to be a stubborn search button icon in the top bar of the staging site of my site but the problem is there is no turn-off or turn-on button for the icon in the admin area. I just can't seem to have it removed.
I believe I can remove this using CSS but I don't know how to.
The site I need help with is: (removed)
Add the following CSS rule to your template.css file:
.topbar .header-right .main-search {
display: none !important;
}
The file is located at /staging/wp-content/themes/oxpitan/css/template.css
If you have access to the html code, simply remove the div with the class "main-search gva-search".
Or, in your css add:
.main-search{
display: none;
}
Note, that this causes the entire class to hide. If you want to only hide that certain element, give it an Id and hide it in CSS the same way, except with # instead of .
Open inspect from chrome and get its id or unique class then add this css code to remove it
class or id {display:none!important;}
remove that from your theme it must be in the header
note: if you use display:none; it still loads but it cannot be seen, if you dont need it at all just delete it.
open the header and search for below codes and delete them.
<div class="main-search gva-search open">
<a class="control-search search-open"><i class="fa fa-search"></i></a>
<div class="gva-search-content search-content">
<div class="search-content-inner">
<div class="content-inner"><form method="get" class="searchform gva-main-search" action="https://sundaybasilagbalegacyfoundation.com/staging/">
<div class="gva-search">
<input name="s" maxlength="40" class="form-control input-large input-search" type="text" size="20" placeholder="Search...">
<span class="input-group-addon input-large btn-search">
<input type="submit" class="fa" value="">
</span>
</div>
</form>
</div>
</div>
</div>
</div>
A sample form control taken from the Bulma CSS framework documentation works as expected using Bulma 0.7.2 (latest at time of writing).
However, when the form is put inside a standard html <details> tag, the height of the element changes, and some width (of the input?) changes, so that there's a visual glitch when hovering over the input.
What's causing this, and is there a style that can be applied to the <details> tag that would make the form element display correctly?
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css">
<div class="field has-addons">
<div class="control">
<input class="input" type="text" placeholder="Find a repository">
</div>
<div class="control">
<a class="button is-info">
Search
</a>
</div>
</div>
<br>
<br>
<details>
<div class="field has-addons">
<div class="control">
<input class="input" type="text" placeholder="Find a repository">
</div>
<div class="control">
<a class="button is-info">
Search
</a>
</div>
</div>
</details>
Edit: as a more minimal example, the style is also wrong for a single <input class="input" type="text" placeholder="Find a repository"> element inside the <details> tag.
The reason this is happening is because the padding in the input and the button is calculated based on em's and since the input is inside a <details> tag, it must be interfering with the proportions somehow - See image below:
I'm not familiar with this framework, I'm not sure there would be a way to adjust the issue. In any case, the quickest workaround would be to target the input and button inside the <details> tag and add a static padding-top and padding-bottom of 0 to both the button and the input inside the <details> tag:
details .input,
details .button{
padding-bottom: 0;
padding-top: 0;
}
After that, I find that if you reduce the input max-width to 89% instead of 100% it amends the issue with the hovering:
details .input{
max-width: 89%;
}
I need to style a span element but only when a child element in a preceding sibling div element is active (i.e. a radio button has been checked).
I cannot amend the code. Can only use CSS.
Any thoughts?
<label class="One">
<span class="Two">
<div class="Three">
<input class="Four" type="radio">
<a class="Five ui-state-default"></a>
</div>
<span class="Six">Don't highlight this</span>
</span>
</label>
<label class="One">
<span class="Two">
<div class="Three">
<input class="Four" type="radio">
<a class="Five ui-state-active"></a>
</div>
<span class="Six">Highlight this</span>
</span>
</label>
need to highlight span.Six but only when a.Five has "ui-state-active" shown.
An alternative, if easier, is I could instead highlight the label element (i.e. the second "label.One" above) but again only if the child element 3 levels down is "active".......
Appreciate the help
Given the conditions that you cannot amend the code and you have to use CSS only, the expected result is not possible. You can either use Javascript or modify the HTML.
But, you can take the help of pseudo elements to nearly achieve what you want. The content of pseudo-elements can be changed based on the CSS rules.
input:checked~a:after {
content: "I am active";
display: block;
color: red;
}
Here is the demo of what I am suggesting:
http://jsfiddle.net/GCu2D/3626/
You can style the pseudo elements in any manner you want.
In case of javascript ,you can start from here:
$(document).ready(function() {
$("input").on("change", function() {
var elem = $(this);
elem.parents("label:first").find(".Six").toggleClass("active")
});
});
Demo: http://jsfiddle.net/GCu2D/3628/
I want to have some text on a row, followed by an input box on the same row.
However, the input box is always going to the next row, even though there's enough space for it on same row as the text. I looked in the documentation, and there is only advice there to do what I want for forms (i.e class form-horizontal).
However, I just want some text (<p> tag) and then an input box.
See simple JSFiddle
http://jsfiddle.net/dz089gac/1/
<div class="container">
<div class="row">
<p>Hi</p>
<input type="text" placeholder="hi">
</div>
</diV>
Use below code:
<div class="container">
<div class="row">
<span>Hi</span>
<input type="text" placeholder="hi">
</div>
</diV>
Use span instead of p tag as p creates block of element and place a new line after the tag close.
This is because the p is a block element and the next element will start on a new line.
If you can not change the element type or move the input into the p tag then you can use css to make the p element inline.
.row p{
display:inline-block;
}
http://jsfiddle.net/dz089gac/3/
A paragraph (p) is a block-level element. That means it takes up the entire "row" it is on.
You should strongly consider using a label (label) instead, which is more semantically correct in this context and, as such, provides a few benefits:
<div class="container">
<div class="row">
<label for="my_input_element">Hi</label>
<input type="text" placeholder="hi" id="my_input_element">
</div>
</diV>
Clicking on the label will set the focus on the corresponding input element, and screenreaders (and other devices) recognize that the label is associated with the input, rather than a block of unrelated text. This is exactly what a label is INTENDED to be used for.
fiddle: http://jsfiddle.net/s62evwmz/
Put inside the paragraph.
<p>Hi <input type="text" placeholder="hi"></p>
But that is much more better, if you are using labels instead of p
<label>Hi <input type="text" placeholder="hi"></label>
I don't know if this is what you want, but i have put the input type into the </p> tag.
Updated fiddle here
just put the input inside the <p></p>
e.g.
<div class="container">
<div class="row">
<p>Hi <input type="text" placeholder="hi"></p>
</div>
</diV>
fiddle
You can set the display property of <P> tag to the inline-block value i.e. display=inline-block and if required you can give some margin for the Box this will add space between them.
ie .
<div class="container">
<div class="row">
<p style="display:inline-block;">Hi</p>
<input type="text" placeholder="hi" >
</div>
</diV>
Demo Link : http://jsfiddle.net/dz089gac/10/
Basically is what is says in the tin.
I have an input tag and independent javascript to control it. When they user is inserting data it changes one of its' classes automatically so that its color is changed by CSS which is defined elsewhere Until then everything is ok. Next: I want the whole div that contains that input to change color so that the user can be warned when something is wrong. There's a problem here: How can I select that div I want to select only using CSS?
Here's some code that works for the input:
input.wrongVal {
border-color: red;
background-color: red;
}
input.wrongVal:active{
background-color: white;
}
Here's the relevant code from the page:
<div class="infoinputContainer">
<p class="inputLine">
<span>
<input type="text" id="data">
<label for="data">Data info</label>
</span>
</p>
</div>
How can I, with only CSS, select for styling the div shown here (and no other div) with, for instance, another background?
You can't do that with CSS. What you can do however is use Javascript to either change the class of the div container or wrap the div container into another div.
<div class="infoinputContainer invalid">
<p class="inputLine">
<span>
<input type="text" id="data">
<label for="data">Data info</label>
</span>
</p>
</div>
or:
<div class="invalidInput">
<div class="infoinputContainer">
<p class="inputLine">
<span>
<input type="text" id="data">
<label for="data">Data info</label>
</span>
</p>
</div>
</div>
You can't. Not with pure CSS.
CSS selectors only select/target children or descendants for performance purposes: if you could target :parent (like in jQuery) the browser would have to wait to render any of the page until it had processed all child nodes.
You'll have to use JavaScript instead.
You can't with just css.
What are you using to change the class when a user enters information? If it's javascript, you can use that to change the class of the parent (or grandparent) as well.