.mdcancel {
float: left;
}
#mdedit input[type='text'] {
display: block;
width: calc(100% - 20px);
margin: 7px auto;
border: 1px solid #999;
}
.mdcancel:hover {
opacity: 0.8;
}
<div class='md' id='mdedit'>
<input type='text' id='inpname'>
<br>
<div class='mdcancel'>CANCEL</div>
</div>
Type anything inside inpname and then hover .mdcancel.
You'll see that inpname moves left.
This won't happen if I change .mdcancel:hover - opacity:0.8 to some another - background:gold for example.
jsfiddle is here
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 making a custom that contains an , and my goal is to remove the natural outline/border from the and place it on the containing such that it still looks natural when focussed, however, it seems that I am not getting the natural outline appearance and instead it looks like the outline is placed on the outside of the div...
Natural input element
My custom div containing the input
Is there something that can be done to achieve the natural outline look?
I have used outline: 5px auto -webkit-focus-ring-color; for the styling on the <div>.
.container {
display: flex;
flex-direction: column;
width: 300px;
}
input, .two {
font-size: 20px;
border: 2px solid grey;
border-radius: 10px;
}
.one {
margin-bottom: 12px;
}
.two {
height: 25px;
}
.two:focus-within {
outline: 5px auto -webkit-focus-ring-color;
}
.three {
border: 0;
outline: 0;
width: 100%;
background: 0;
}
<div class="container">
<input class="one" />
<div class="two">
<input class="three"/>
</div>
</div>
You can try giving it a negative outline-offset such as outline-offset: -1px;
It's not pixel perfect, but it does look a bit more like built-in style outline on Chrome:
But do bear in mind that it might vary for different devices. For me -1px looks the best.
.container {
display: flex;
flex-direction: column;
width: 300px;
}
input, .two {
font-size: 20px;
border: 2px solid grey;
border-radius: 10px;
}
.one {
margin-bottom: 12px;
}
.two {
height: 25px;
}
.two:focus-within {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.three {
border: 0;
outline: 0;
width: 100%;
background: 0;
}
<div class="container">
<input class="one" />
<div class="two">
<input class="three"/>
</div>
</div>
The proper solution might be using box-sizing: border-box;, which border width is also counted for width and height. So you don't need to do anything to make them look identical.
But it seems not working for Safari.
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
width: 300px;
}
input, .two {
font-size: 20px;
border: 2px solid grey;
border-radius: 10px;
}
.one {
margin-bottom: 12px;
}
.two {
height: 30px;
}
.two:focus-within {
outline: 5px auto -webkit-focus-ring-color;
}
.three {
border: 0;
outline: 0;
width: 100%;
background: 0;
}
<div class="container">
<input class="one" />
<div class="two">
<input class="three"/>
</div>
</div>
This question already has answers here:
Shape with a slanted side (responsive)
(3 answers)
Closed 5 years ago.
I'm trying to create the following form with the input fields having a diagonal side so they fit nicely together, see image below for more accurate description.
However i'm unable to achieve this as i have no idea on how to do this. I tried with transparant borders but without succes.
Anyone an idea on how to do this?
I love Ilya's skew solution. Super creative.
Here's an option using some :after pseudo-elements and CSS triangles to create the skewed effect. To achieve the desired effect we add :after pseudo elements to the right-side of the left inputs, and to the left-side of the right input/button.
Here's the end effect:
.container {
display: flex;
flex-direction: column;
background-color: #565452;
padding: 20px;
}
.row {
display: flex;
}
.row:not(:last-child) {
margin-bottom: 60px;
}
.field {
width: calc(100% - 10px);
position: relative;
background-color: #565452;
}
.field:first-child {
margin-right: 30px;
}
.field:after {
content: "";
display: block;
position: absolute;
top: 0;
width: 0px;
height: 0px;
}
.field:first-child:after {
right: -15px;
border-top: 60px solid #ffffff;
border-right: 15px solid transparent;
}
.field:last-child:after {
left: -15px;
border-bottom: 60px solid #ffffff;
border-left: 15px solid transparent;
}
.field.field--button {
flex-basis: 25%;
}
.field.field--button:after {
border-bottom: 60px solid #F9D838;
}
.input {
border: none;
line-height: 60px;
outline: none;
padding: 0 15px;
width: 100%;
box-sizing: border-box;
background-color: #ffffff;
font-size: 18px;
}
.input::placeholder {
color: #cccccc;
}
.button {
background-color: #F9D838;
color: #ffffff;
border: none;
outline: none;
line-height: 60px;
font-size: 30px;
width: 100%;
padding: 0 30px 0 20px;
text-transform: uppercase;
}
<form>
<div class="container">
<div class="row">
<div class="field">
<input class="input" placeholder="Voornaa m" />
</div>
<div class="field">
<input class="input" placeholder="Achternaa m" />
</div>
</div>
<div class="row">
<div class="field">
<input class="input" placeholder="E-mail" />
</div>
<div class="field field--button">
<button class="button" type="submit">Go</button>
</div>
</div>
</div>
</form>
You can apply transform: skewX for the container, "undo" it (by applying the same transform, but with the opposite sign of the angle) for the items, and hide the outer corners with overflow:hidden of the outer container, like this:
form {
margin: 20px;
overflow: hidden;
width: 350px;
}
.row {
display: flex;
transform: skewX(-15deg);
margin: 0 -5px;
}
.cell {
display: flex;
margin: 0 3px;
overflow: hidden;
}
.wide {
flex: 1;
}
.cell > * {
transform: skewX(15deg);
margin: 0 -5px;
border: none;
flex: 1;
}
input {
padding: 4px 5px 4px 15px;
background: yellow;
}
button {
padding: 4px 25px 4px 20px;
background: pink;
}
<form class="outer-container">
<div class="row">
<div class="cell wide"><input placeholder="enter something"></div>
<div class="cell"><button>Press me</button></div>
</div>
</form>
I'd add a seperate span element to the end and then use border-bottom/top/left/right and set them to the color that you need.
Something like this: http://jsfiddle.net/delnolan/3jbtf9f1/
<style>
.angled-input{
border: none;
height: 50px;
float: left;
display:block;
}
input:focus{
outline: none;
}
.add-angle{
display: block;
float:left;
border-right:30px solid transparent;
border-bottom: 50px solid #ffffff;
}
</style>
<form>
<input class="angled-input"/><span class="add-angle"></span>
</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>
HTML
<div class="select">
<div>
<label for="kitty" class="kitty-label kitty-label-1 l-center">
</label>
<input type="checkbox" name="cats" value="1">
<label>Kitty One</label>
</div>
<div class="cly-pam" style="width:50%; float: left">
<label for="kitty" class="kitty-label kitty-label-2 l-center">
</label>
<input type="checkbox" name="cats" value="2">
<label>Kitty Two</label>
</div>
</div>
<div>
css
label{
cursor: pointer;
}
.kitty-label{
position: relative;
width: 100%;
&:hover,
&:focus,
&:active{
border-radius: 6px solid #fff;
}
}
.kitty-label-1{
display: inline-block;
background: url(../img/kitty1.png) no-repeat 0 0;
height: 142px;
width: 142px;
}
.kitty-label-2{
display: inline-block;
background: url(../img/kitty2.png) no-repeat 0 0;
height: 144px;
width: 144px;
}
.select input[type="checkbox"]{
display: none;
&:checked + label:before{
background: url(../img/tick.png) no-repeat;
}
}
The labels would have background image but the issue is that when focus, active or hover, the border-radius does not appear behind the images. Also the kitty images do not have border-radius edges. Wonder if should have image in circle shape or css3 can do that?
Also checkbox seems not to show the tick or anything. Tried to click on label (as in kitty image), tick doesn't appear?
Not sure where I might go wrong. Help will be very much appreciated.
Updated
<div>
<input type="radio" name="type" value="designer" id="designer">
<label for="designer" id="designer" class="inline-block testsign" style="background: url(../img/face.png) no-repeat center;">
</label></div>
CSS
.testsign{
width: 170px;
height: 170px;
border-radius: 100%;
&:hover,
&:focus,
&:active{
border: 15px solid #f3f3f3;
}
}
// [type="radio"]:not(:checked),
// [type="radio"]:checked {
// visibility: hidden;
input[type="radio"]:checked + label:after {
content:"";
display: block;
position: absolute;
height: 60px;
width: 60px;
background: #f0f1f1 url(../img/tick.png) no-repeat center center;
border-radius: 100%;
border: 10px solid #fff;
}
Attempted the example from #misterMan
Couldn't get the label:after to be positioned at the right bottom - tried top and left to position the tick circle, but the problem is that when checked, it will appear in the position which followed top and left. So if check extra element or image, tick circle will appear in the same place which is not right. Removed the top and left. There is no way to have tick circle positioned in right bottom appearing in each label whenever radio is checked?
Also another problem is that when border radius on the label is hovered on background image, and if checked radio, the tick circle (label:after) will appear, the tick circle will be "jumpy" whenever hovered on label. How to stop the jump? I tried to add absolute center and position relative but the labels will be out of the container.
Help or insight will be appreciated.
I love this type of stuff so I made this for you, if you are still looking for a solution. I have added the images with <img> as they are not decoration, they are primary content :)
It's nice and simple, and I think does what you want. Let me know!
Updated
Have an updated fiddle!
HTML
<form>
<input type="checkbox" id="pic1" />
<label for="pic1">
<img src="http://www.placehold.it/200" />
</label>
<input type="checkbox" id="pic2" />
<label for="pic2">
<img src="http://www.placehold.it/200" />
</label>
</form>
CSS
body {
margin: 0;
}
input[type=checkbox] {
display: none;
}
label {
position: relative;
display: block;
width: 200px;
cursor: pointer;
float: left;
margin: 10px 0 10px 10px;
}
input[type=checkbox] + label img:hover {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
input[type=checkbox]:checked + label img {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
input[type=checkbox]:checked + label img:hover {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
input[type=checkbox]:checked + label:after {
content:"";
display: block;
position: absolute;
bottom: 10px;
right: 10px;
height: 50px;
width: 50px;
background: url(http://i.imgur.com/i7379jf.png) no-repeat right bottom;
background-size: 50px;
}
input[type=checkbox]:checked + label:hover:after {
}