I have the following HTML structure:
<span id="span_pagination_text_input">
<input type="text" class="form-control" id="pagination_text_input" name="pagination_text_input"/>
...
</span>
And Following CSS:
span#span_pagination_text_input{
position:relative;
}
span#span_pagination_text_input > input#pagination_text_input{
left: -11px;
position: absolute;
top: -35px;
width: 57px;
z-index: 10;
display:none;
text-align:center
}
span#span_pagination_text_input:hover > input#pagination_text_input{
display:block;
}
At this time when visitors hover on my span, I will show the input field which is hidden by default.
How I can focus on input children of span when I show that with CSS?
I know about jQuery but at this time I am looking for a CSS solution.
You can achieve that by using tabindex which HTML5 allows in all elements now along with the :focus, to fake the display:none use border:0
input {
border: 0;
width: 57px;
z-index: 10;
text-align: center
}
span:focus input {
border: 5px solid red;
transition: border .1s
}
input:focus {
border: 5px solid green;
}
<span tabindex="1" id="span_pagination_text_input">
Click me
<input type="text" class="form-control" id="pagination_text_input" name="pagination_text_input" />
</span>
I don't think that it is possible with only css. You can try javascript
document.getElementById("IdOfInput").focus();
:-)
Related
I want to make a simple input that when you focus on it a nice border appears from the bottom center of it with some transition:
<form method="POST" action="/admin/add-product" class="add-product">
<div class="form-input">
<label for="title">title</label>
<input type="text" name="title" id="title" placeholder="title">
</div>
<button className="btn btn-green">Add product</button>
</form>
\* some basic styling for the form *\
.add-product {
width: 500px;
max-width: 95%;
margin: 3rem auto;
padding: 2rem;
}
\* .form-input contains the input and the label *\
.form-input {
width: 100%;
position: relative;
}
.form-input input,
.form-input label {
display: block;
width: 100%;
margin-bottom: 1rem;
}
.form-input input {
height: 2rem;
background: transparent;
border: transparent;
}
\* the ::after *\
.form-input::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
height: 2px;
width: 0%;
background-color: var(--green);
transition: width 0.6s;
}
\* this where I think I made a mistake these changes are not applied to ::after at :focus *\
.form-input input:focus + ::after {
width: 100%;
}
I expected to see the ::after element's width to change but it doesn't so I think there is a mistake in selecting this way .form-input input:focus + ::after; even though I think there is no
CSS does have a :focus-within pseudo class solution for this:
.form-input:focus-within::after { width: 100%; }
It's supported in all major browsers.
.form-input::after matches the pseudo-element that appears after the content of any .form-input element.
.form-input input:focus + ::after matches the pseudo-element that appears after the content of the next sibling of any focused input that is a descendant of .form-input.
Unless you have HTML like:
<div class="form-input">
<input>
<div class="form-input"></div>
</div>
… that isn't going to match anything.
You can't select the parent element's ::after based on the focus state of a child element. CSS doesn't have a parent selector.
You'd need to use JS for this.
I have a problem with DotVVM multiselect styling. Content of multiselect is overlayed by input and I dont know what cause this problem. When I use dropdown list which uses exactly the same css classes, there isn't any problem with this. You can see dropdown list structure in picture below
Here is my HTML structure
<div class="form-group">
<Label>
<dot:Literal Text="{{value: Article.Article_Sections}}" />
</Label>
<div class="input-group">
<bp:MultiSelect DataSource="{value: ArticleSectionsList}"
SelectedValues="{value: SelectedArticleSections}"
ItemTextBinding="{{value: Name}}"
ItemKeyBinding="{{value: Id}}"
class="form-control " />
</div>
</div>
<div class="form-group">
<Label>
<dot:Literal Text="{{value: DetailDTO.Name}}" />
</Label>
<div class="input-group" Validator.Value="{{value: DetailDTO.Name}}">
<dot:TextBox class="form-control" Text="{{value: DetailDTO.Name}}" />
</div>
</div>
CSS code here
.form-group {
position: relative;
}
.input-group {
position: relative;
display: table;
border-collapse: separate;
}
.dotvvm-bp-multi-select .bp-popup {
display: none;
padding: 5px 2px;
position: fixed;
overflow: hidden;
border-collapse: collapse;
border: 1px solid #808080;
border-radius: 0;
background-color: #fff;
color: #1a1a1a;
font-weight: normal;
cursor: default;
margin-top: 1px;
z-index: 1001;
text-align: left;
}
//here is css for opened state
.dotvvm-bp-multi-select .bp-popup.bp-state-opened {
display: block;
z-index: 1001;
}
.dotvvm-bp-multi-select .bp-popup.bp-has-list > ul {
list-style: none;
overflow-x: hidden;
padding: 5px 2px;
max-height: 250px;
margin: 0;
}
Image is edited, I changed dropdown list to simple text input in my previous code structure to make it more readable, problem is still the same.
Image showing dropdown list component, which works fine
It's a bootstrap compatibility issue. The form-group with MultiSelect is not focusable and therefore has lower z-index than the other groups.
I'm trying to create a custom component using only CSS and HTML.
The behavior of the component will be like: when the input is selected (has focus) another container is open.
The problem is when the container is opened the input lose focus and the container is closed on first click :(
So How can I have that input focus focused when I'm on the opened container focused ?
<div class="block">
<label>Field</label>
<input type="text" tabindex="-1"/>
<div tabindex="-1" class="infront">
Keep this bastard open.<br/>
<br/>
while clicking on this div
</div>
</div>
CSS
.block{
position: relative;
display: inline-block;
margin: 50px;
}
.infront{display: none;}
.block input[type="text"]:focus ~ .infront {
display: block;
position: absolute;
top:100%;
width: 80%;
right: 0;
background: #ccc;
opacity:0.8;
}
Fiddle:
You need to take care of the state of .infront container states as well.
Update your CSS to this
.block input[type="text"]:focus ~ .infront
, .infront:hover
, .infront:active
, .infront:focus {
display: block;
position: absolute;
top:100%;
width: 80%;
right: 0;
background: #ccc;
opacity:0.8;
}
I think you can not do it only with HTML and CSS. You will need some jquery code like this:
$(.block input[type=text]).on('focus', function(e) {
$('.infront').show();
});
I have a checkbox and i would like to style it. When the checkbox is unchecked it should have a black border and when the checkbox is checked the hole checkbox should be black without hook. Below you see what i have done so far. Sadly it wont work.
My Code:
<form>
<input class="newsletter" type="checkbox" value="text">Ich möchte den Newsletter bekommen
</form>
input[type=checkbox]:not(old){
width : 13px;
margin : 0;
padding : 0;
opacity : 0;
}
.newsletter:unchecked{
width:13px;
height: 13px;
border: 2px solid black;
border-radius:3px;
}
.newsletter:checked{
width:13px;
height: 13px;
border: 2px solid black;
background-color:black;
border-radius:3px;
}
The first part of my code should hide the current checkbox. The second part should be the checkbox when the box is unchecked and the third part when the box is checked. I thought this is how you are styling these checkboxes. What am i doing wrong?
This may help you
.checkbox input[type=checkbox] {
display: none;
}
.checkbox input[type=checkbox]:not(:checked) + label:before {
content: "";
border: 2px solid #000;
height: 10px;
width: 10px;
display: inline-block;
}
.checkbox input[type=checkbox]:checked + label:before {
content: "";
border: 2px solid #000;
height: 10px;
width: 10px;
background: #000;
display: inline-block;
}
<form>
<div class="checkbox">
<input id="check" class="newsletter" type="checkbox" value="text">
<label for="check"> Ich möchte den Newsletter bekommen</label>
</div>
</form>
The first thing you need to do with your code is add a label, e.g.:
<form>
<input class="newsletter" type="checkbox" value="text" id="newsletter" name="newsletter">
<label for="newsletter">Ich möchte den Newsletter bekommen</label>
</form>
I've also added an id and name attribute to the checkbox. The id needs to be the same as the for attribute on the label for this trick to work.
Next, we need to visibly hide the checkbox. I tend to use a class of sr-only in the CSS to visibly hide things based on Yahoo's example:
.sr-only{
height: 1px;
width: 1px;
overflow: hidden
clip: rect(1px,1px,1px,1px);
position: absolute;
}
Next we create a pseudo element before the label. For the style rules I'm using the adjacent sibling selector (+) to apply the rules when the label is an adjacent sibling of the checkbox. I'm keeping your class name so it'll only target labels that're siblings of class newsletter:
.newsletter:not(checked) + label:before{
content:" ";
display: inline-block;
width:13px;
height: 13px;
border: 2px solid black;
border-radius:3px;
}
The :not(checked) means apply these rules when newsletter is not checked.
To change the styles when newsletter is checked we change the background colour like this:
.newsletter:checked + label:before{
background-color:black;
}
This way clicking our pseudo checkbox or the text in the label will check the box (clicking the label at all sends focus to the field, so with a checkbox will check it).
it's possible to make it like this when you onfocus (onclick) on the input text. Any help would be appreciated.
You can make use of outline and :focus, these are compatible with major browsers.
HTML
<input type="text" class="inp" />
<br>
<input type="text" class="inp" />
CSS
.inp{
border:solid 2px gray;
margin: 20px 5px;
outline:solid 10px silver;
}
.inp:focus{
outline:solid 10px red;
}
Preview on JSFiddle
You can do it like this :
input:focus
{
background-color:blue;//*
}
*this is just a example to change the background color.Do any thing that u desire here
Take look at complete example here.
You can wrap the input with an anchor tag, and set it to change background-color onfocus:
<a class='focused'><input /></a>
with CSS:
.focused:hover{
background-color:blue;
}
or, if you want it to change when the input is active, you need to use javascript/jQuery.
I think you would have to wrap each input in a div and give that div a background color when it has focus using JavaScript. Here's a version in jQuery...
$(document).ready(function() {
$('input').on('focus', function() {
$(this).parent().css('background-color', 'blue');
});
});
I think this CSS trick can be used rarely in real cases, but it is funny, that we can make this effect with box-shadows.
http://jsfiddle.net/XSpwg/
HTML:
<div>
<form>
<input></input>
<input></input>
<input></input>
</form>
</div>
CSS:
div {
background-color: lightgrey;
width: 80%;
max-width: 400px;
overflow: hidden;
padding: 5px;
}
input {
margin: 2em 0.5em;
display: block;
border: solid 2px lightblue;
outline: none;
height: 16px;
line-height: 16px;
font-size: 12px;
}
input:focus {
box-shadow: 180px 227px 0 200px lightgrey,
180px 195px 0 200px blue;
}
Use pseudo-class selector for various effects.
There are two possible methods using CSS
Method 1 --> if you need both hover and on focus effect then use border styling for the <input> element
here is a typical HTML and CSS for method 1, --> Jsfiddle view
HTML
<form class="form-style">
<input class="input-style" type="text" name="some-name">
<input class="input-style" type="text" name="some-name">
</form>
CSS
.form-style
{
width: 250px;
margin:auto;
background-color: #d6d6d6;
display:block;
}
.input-style
{
width:200px;
margin:auto;
padding-left: 0px;
padding-right: 0px;
line-height: 2;
border-width: 20px 25px;
border-collapse: separate;
border-style: solid;
border-color: #d6d6d6;
display: block;
}
input.input-style:focus, input.input-style:hover
{
border-color: #3399FF;
}
Method 2 -> if you need just a hover effect then enclose the <input> element in a <div> and add :hover effect to it, or you can use the method 1 :hover and remove the :focus selector
here is a typical HTML and CSS for method 2, --> Jsfiddle view
HTML
<form class="form-style">
<div class="input-style">
<input type="text" name="some-name">
</div>
<div class="input-style">
<input type="text" name="some-name">
</div>
</form>
CSS
.form-style
{
width:250px;
margin:auto;
display:block;
}
.input-style
{
width: 200px;
background-color: #d6d6d6;
padding:20px 25px 20px 25px;
display: block;
}
.input-style input
{
width:inherit;
line-height: 2;
display: block;
}
.input-style:hover
{
background-color: #3399FF;
}
My advice -> just use on focus effect, because on hover will highlight the <input> on which the mouse is over even if you you are typing (on focus) in another <input>