Assume I have a form input structured as follows:
<div class="wrapper">
<span class="icon icon-search"></span>
<input type="text"/>
</div>
is there a way, with CSS3, to apply a red border around the .wrapper div on a focus state on the input element?
.wrapper input:focus {
border solid thin red;
}
puts the border on the input field but I want it on the containing div.
You're looking for a css parent selector. Unfortunately that isn't currently available. The exact functionality you're looking for would need JavaScript or alternative HTML.
It looks like you want the border to surround the icon and the field but currently it is only surrounding the field? My suggestion would be to use the sibling selector like so: (From my example below i've moved the icon after the input)
* {
box-sizing: border-box; /* Helps with sizing calculations */
}
.wrapper {
position: relative;
}
.icon {
width: 20px;
height: 20px;
position: absolute;
background-color: blue;
left: 200px;
top: 0;
border: solid 1px transparent;
border-left: none;
}
input {
width: 200px;
height: 20px;
border: solid 1px blue;
border-right: none;
}
input:focus {
border-color: red;
outline: 0;
}
input:focus + .icon {
border-color: red;
}
<div class="wrapper">
<input type="text"/>
<span class="icon icon-search"></span>
</div>
Related
I have a form with fieldsets, and would like to keep the border, but would like the border to be shown between some text legends. I can't get the legend to have a transparent background to let the border through (to be blocked by some text elements).
legend {
display:flex;
justify-content:space-between;
width: 100%;
background-color: transparent;
}
legend div {
background-color: white;
margin-left:0.5em;
margin-right:0.5em;
}
<form>
<fieldset>
<legend><div>Form Item</div><div>(extra 1)</div></legend>
<label>Input:</label><input></input>
</fieldset>
</form>
Extra div hack. If there is a way to do this without the extra div, that would be great.
I guess if I force the fieldset border (chrome's default border is 2px groove threedface), it works ok.
fieldset {
border: 1px solid black;
}
legend {
display:flex;
justify-content:space-between;
width: 100%;
position: relative;
}
legend div {
background-color: white;
margin-left:0.5em;
margin-right:0.5em;
}
legend div.line {
flex: 1 1 auto;
background-color: transparent;
}
legend div.line:before {
position: absolute;
z-index: -1;
content: '';
left: 0px;
right: 0px;
top: 50%;
border-top: 1px solid black;
}
<form>
<fieldset>
<legend><div>Form Item</div><div class="line"></div><div>(extra 1)</div></legend>
<label>Input:</label><input></input>
</fieldset>
</form>
background can approximate this without an extra div. You simply need to find the correct color:
fieldset {
border: 1px solid black;
}
legend {
display: flex;
justify-content: space-between;
width: 100%;
background: linear-gradient(black 0 0)center/100% 1px no-repeat;
}
legend div {
background-color: white;
padding:0 0.5em;
}
<form>
<fieldset>
<legend>
<div>Form Item</div>
<div>(extra 1)</div>
</legend>
<label>Input:</label><input>
</fieldset>
</form>
I'm trying to add an overlay box at the bottom of a textarea. Positioning the overlay box was easy, but now I want the textarea content to never overlap the overlay box.
My first approach was adding padding-bottom so that the text never reaches the bottom of the textarea, where the overlay box is placed. However, as I type, the text will go under it. Also, scrolling up will cause the same undesired behavior.
Edit:
In response to some of the answers that partially solve my issue. I'm trying to make the textarea look as native as possible, so border color changing on focus would be necessary as well.
.container {
position: relative;
width: 110px;
}
textarea {
width: 100%;
height: 50px;
resize: none;
}
texarea.with-padding {
padding-bottom: 1em;
}
span {
position: absolute;
bottom: 5px;
width: 100%;
height: 1em;
background: rgba(255,0,0,0.5);
}
<div class="container">
<textarea name="" id="">I want this to never go under the red box.</textarea>
<span></span>
</div>
<div class="container">
<textarea class="with-padding" name="" id="">I tried with padding-bottom, but it doesn't work either.</textarea>
<span></span>
</div>
You can use a <div> container (which holds your textarea and overlay) as a fake border and remove the border of textarea. Just as shown in the snippet below:
$('textarea').on('focus', function() {
$('.textarea-holder').css('border-color', 'rgba(255, 0, 0, 0.5)');
});
$('textarea').on('blur', function() {
$('.textarea-holder').css('border-color', '#333');
});
.textarea-holder {
border: 1px solid #333;
display: inline-block;
}
.textarea-holder textarea {
display: block;
resize: none;
border: none;
}
textarea:focus {
outline: none;
}
.textarea-holder .overlay {
width: 100%;
height: 20px;
background: rgba(255, 0, 0, 0.5);
}
body {
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="textarea-holder">
<textarea rows="6"></textarea>
<div class="overlay"></div>
</div>
Hope this helps!
You can simply add a bottom-border: 1em to the textarea to imitate the span element.
Here is a working example: http://codepen.io/anon/pen/woKyvy#anon-login
.container {
position: relative;
width: 200px;
}
textarea {
width: 100%;
height: 50px;
border-bottom: 1em solid rgba(255,0,0,0.5);
}
<div class="container">
<textarea>Try typing. The cursor will never end up under the red line.</textarea>
</div>
So I went ahead and wrote it down:
Removed the border and reset some styles of textarea
Added the fake border to the container and removed the positioning of the span and made it a block element.
See code below:
.container {
position: relative;
width: 110px;
border: 1px solid;
}
textarea {
width: 100%;
height: 50px;
resize: none;
border:none;
outline:none;
padding: 0;
}
.container span {
display:block;
width: 100%;
height: 1em;
background: rgba(255, 0, 0, 0.5);
}
<div class="container">
<textarea name="" id="">I want this to never go under the red box.</textarea>
<span></span>
</div>
I finally found a solution to this riddle thanks to Saurav Rastogi's and eyetea's answers. Both were almost perfect, but failed to make the textarea have its border highlighted on focus. I've managed to keep this behavior using outline.
I think both approaches are useful as they allow for two different border highlight on focus. One leaving the overlay outside, using a div wrapper strategy, and the one leaving it inside, using a very thick border-bottom.
/* Inner border on focus solution */
.textarea-wrapper {
border: 1px solid gray;
display: inline-block;
}
.textarea-wrapper textarea {
display: block;
border: none;
}
.textarea-wrapper textarea:focus {
outline: 1px solid green;
outline-offset: 0;
}
.textarea-wrapper .overlay {
width: 100%;
height: 20px;
background: rgba(255, 0, 0, 0.5);
}
/* Outer border on focus solution */
textarea.bottom-padded {
border-bottom: 21px solid rgba(255,0,0,0.5);
outline: 1px solid gray;
outline-offset: -1px;
}
textarea.bottom-padded:focus {
outline-color: green !important;
}
<div class="textarea-wrapper">
<textarea rows="3">Inner border on focus</textarea>
<div class="overlay"></div>
</div>
<textarea rows="3" class="bottom-padded">Outer border on focus</textarea>
I want to check a checkbox and apply a 1px border around it via an enclosing span tag.
I am a bit stuck on how to detect the checked css property and select the parent span to apply a property to the span? Can I achieve this with only CSS? Below is what I have so far.
CSS(Sass)
input.checkbox
opacity: 0
span.check
width: 16px
height: 16px
border: 2px solid black
display: inline-block
position: relative
input.checkbox:checked <--once i detect checked I am unsure how to apply the border to the parent span tag
background: black
position: absolute
top: -8px
left: 0px
HTML
<span class='check'><input type="checkbox" class="checkbox" name="" /></span>
Simply NO,
Cascading does not works like that way. You can't select parent in CSS. But yes you can do this by using sass/scss. But it will not work as you expected.
It will just create a parent wrapper class. But it will not behave using the state of the child element. Because after compiling it's just CSS
We might get a parent selector in the future, may be in CSS4. So we are keeping our fingers crossed. :)
e.g.
SASS
input.checkbox
opacity: 0
span.check
width: 16px
height: 16px
border: 2px solid black
display: inline-block
position: relative
input.checkbox:checked
background: black
position: absolute
top: -8px
left: 0px
span.check &
border: 2px solid black
Output CSS,
input.checkbox {
opacity: 0;
}
span.check {
width: 16px;
height: 16px;
border: 2px solid black;
display: inline-block;
position: relative;
}
input.checkbox:checked {
background: black;
position: absolute;
top: -8px;
left: 0px;
}
span.check input.checkbox:checked {
border: 2px solid black;
}
But You can achieve this by using CSS siblings selector,
HTML,
<label>
<input class="checkbox" type="checkbox">
<span class="check"></span>
</label>
CSS,
label {
position: relative;
}
input.checkbox {
opacity: 1;
position: absolute;
}
input.checkbox:checked + span.check {
width: 16px;
height: 16px;
border: 2px solid black;
display: inline-block;
position: absolute;
}
Working example: https://jsfiddle.net/HA3bQ/167/
No way to select a parent with CSS only (until CSS4), so you must use JS..
See this post that talking about it here.
I have not seen that done using CSS, only within the javascript wherever the checkbox resides.
You can put some element after input
<label>
<input class="checkbox" type="checkbox">
<span class="checkmark></span>
</label>
And style with pseudo class :checked
.checkbox:checked ~ .checkmark {
// There goes styles for custom checkmark
}
Recommend look at this site for full examples
the simple answer is just use outline in css style
input.checkbox:checked {
outline: 2px solid black;
}
<span class='check'><input type="checkbox" class="checkbox" name="" /></span>
When I mouse over div.divClass, the tooltip text should show.
How can I achieve that?
.divClass {
width: 200px;
height: 200px;
border: 1px solid
}
<div class="divClass">
test
</div>
EDIT
Actually I want to show tooltip top of the ANCHOR element when mouse over on div. If I add title in Div means I'm getting alignment issue.
The title attribute cannot force a tooltip to appear in one fixed location, regardless of where the hover occurs. That's not normally how the tooltip works. However, here's a method that may work for you.
.divClass {
width: 200px;
height: 200px;
border: 1px solid;
position: relative;
margin: 30px;
cursor: pointer;
}
span { display: none; }
.divClass:hover > span {
display: inline-block;
position: absolute;
top: -25px;
left: 0;
border: 2px solid red;
background-color: yellow;
}
<div class="divClass">
test
<span>Tooltip text</span>
</div>
jsFiddle
References:
title attribute ~ MDN
Global attributes ~ MDN
I have a DIV container. inside it, I have a button. I want the button to be used to change the DIV's position attributes. I want the button click to shift the entire container to the left.
I have to do this without any scripting; only CSS and HTML.
is this possible?
perhaps with buttonclick:active{stuff}?
You can use the checkbox hack
#move-div {
display: none;
}
#move-div:checked + .movable {
left: -50px;
}
.movable {
position: relative;
background-color: #FF0000;
padding: 10px;
}
.button {
display: inline-block;
padding: 5px;
background-color: #FFF;
border-radius: 5px;
color: #000;
box-shadow: 3px 3px 5px 3px #AAA;
}
<input id="move-div" type="checkbox">
<div class="movable">
<label class="button" for="move-div">Move the div</label>
</div>