This question already has answers here:
Can I use a :before or :after pseudo-element on an input field?
(22 answers)
Closed 4 years ago.
I am trying to add a close button on each of input element by using psudo class after. but not working. same works with button element.
here i my code :
.textBox {
padding: 15px ;
text-decoration: none;
display: inline-block;
position: relative;
}
.textBox:after {
content: "";
width: 15px;
height: 15px;
background: #ff0 url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat -30px -75px;
border:1px solid red;
display: inline-block;
border:1px solid red;
}
<input type="text" class="textBox" value="mytext" name="" id="">
<button class="textBox">Click me</button>
Use wrap div and set there textBox class instead of in input
.textBox {
padding: 15px ;
text-decoration: none;
display: inline-block;
position: relative;
}
.textBox:after {
content: "";
width: 15px;
height: 15px;
background: #ff0 url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat -30px -75px;
border:1px solid red;
display: inline-block;
border:1px solid red;
}
<div class="textBox">
<input type="text" value="mytext" name="" id="">
</div>
<button class="textBox">Click me</button>
Related
This question already has answers here:
Put icon inside input element in a form
(21 answers)
Closed 1 year ago.
I would like to know how to align a search icon, within the text box, same as Google's search bar
Like this:
This is what i got, but idk How to do it:
I am trying to avoid using bootstrap or any library. I want to keep it vanilla as much as I can.
#search-bar {
width: 32%;
color: white;
border-radius: 24px;
border-style: solid;
border-width: 1px;
border-color: white;
background-color: #2d2d2d;
height: 44px;
}
<form class="search-bar-form">
<input id="search-bar" type="text" href="#" />
<img src="https://via.placeholder.com/24" />
</form>
You can place the image as the background of the textbox:
#search-bar {
width: 32%;
color: white;
border-radius: 24px;
border-style: solid;
border-width: 1px;
border-color: white;
background-color: #2d2d2d;
height: 44px;
background-image: url(https://via.placeholder.com/24);
background-position: 10px center;
background-repeat: no-repeat;
padding-left: 40px;
}
<form class="search-bar-form">
<input id="search-bar" type="text" value="text goes after the padding" />
</form>
You can use position: absolute.
Like this:
form {
position: relative;
}
img {
position: abosolute;
top: 10px;
right: 20px;
}
You should update top and right values.
This is only example.
Add some padding-left to the search bar, to move the text more to the right side.
Then add a class to the image and define it like that:
.mySearchIconImage {
position: absolute;
top: 10px;
left: 10px;
Also add position: relative to the form itself, to make sure the img isn't positioned outside of your form.
There are several ways. One way is with absolute position inside a relative position parent...
body {
margin: 0;
}
#search-bar {
width: 32%;
color: white;
border-radius: 24px;
border-style: solid;
border-width: 1px;
border-color: white;
background-color: #2d2d2d;
height: 44px;
position: relative;
padding-left: 44px;
}
.search-icon {
position: absolute;
left: 0;
}
<form class="search-bar-form">
<input id="search-bar" type="text" href="#" />
<img src="https://img.icons8.com/material-outlined/50/000000/search.png" class="search-icon" />
</form>
Demo
Another way is using relative position and a negative margin. For this, put the img before the input in your markup.
#search-bar {
width: 32%;
color: white;
border-radius: 24px;
border-style: solid;
border-width: 1px;
border-color: white;
background-color: #2d2d2d;
height: 44px;
padding-left: 44px;
}
.search-icon {
position: relative;
margin-right: -60px;
z-index: 1;
vertical-align: middle;
}
<form class="search-bar-form">
<img src="https://img.icons8.com/material-outlined/50/000000/search.png" class="search-icon" />
<input id="search-bar" type="text" href="#" />
</form>
This question already has answers here:
Can I use a :before or :after pseudo-element on an input field?
(22 answers)
Internet Explorer 'input:checked:before styling is not rendering [duplicate]
Closed 5 years ago.
I'm having issue with :checked styling for my custom checkbox in Internet explorer. It works fine in chrome ,friefox and safari.
How look in IE..
<div class="field">
<input autocomplete="off" id="check" type="checkbox" name="checkbox"/>
<label class="title-checkbox">Accept terms & conditions.</label>
</div>
.field input[type="checkbox"] {
width: 20px;
height: 20px;
border: solid 1px rgba(97, 80, 77, 0.5);
float: left;
outline: 0;
padding-left: 0px !important;
position: relative;
padding: 4px;
cursor: pointer;
}
.field input[type="checkbox"]:checked:before {
content: '';
position: absolute;
top: 3px;
height: 12px;
width: 12px;
background: #ed8b00;
left: 3px;
}
Can anyone help with this.
Thanks in advance.
:after and :before not meant to be used on replaced elements such as form elements (inputs). that's why it doesn't work on IE
Generally you use the label element to make before element on input checkbox like this :
.field input[type="checkbox"] {
width: 20px;
height: 20px;
border: solid 1px rgba(97, 80, 77, 0.5);
float: left;
outline: 0;
padding-left: 0px !important;
position: relative;
padding: 4px;
cursor: pointer;
}
.field input[type="checkbox"] +label{
position: relative;
}
.field input[type="checkbox"]:checked +label:before {
content: '';
position: absolute;
top: 5px;
height: 14px;
width: 14px;
background: #ed8b00;
left: -20px;
}
<div class="field">
<input type="checkbox" name="test" id="test" value="ok">
<label for="test">I'a a label</label>
</div>
you can also use image of your checkbox in label before and completely hide input if you want your own style.
Use This code it will work fine on all browser (IE 10+, Chrome, Mozilla and Safari)
<div class="checkbox">
<input type="checkbox" />
<label></label>
</div>
.checkbox{
position:relative;
}
input[type="checkbox"]{
opacity:0;
position:absolute;
z-index:1;
width:20px;
height:20px;
left:0;
top:0;
margin:0;
}
.checkbox label:before{
content:"";
width:20px;
height:20px;
border:1px solid #000;
display:block;
position:absolute;
left:0;
top:0;
}
.checkbox input[type="checkbox"]:checked + label:before{
background:#000000;
}
Demo
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>
This question already has answers here:
remove the thin line in header images in bootstrap
(2 answers)
Closed 5 years ago.
I have this image with a rounded shape, but how do I get rid of the square square edges/border?
HTML
<div id="picture">
<input type='file' id="input">
<img [src]="url" id="Image">
<label for="uploadinput" id="uploadlabel">Upload Picture</label>
CSS
#Image {
background-image: url('http://i.stack.imgur.com/Dj7eP.jpg');
border-radius: 200px;
width: 200px;
height: 200px;
background-size: 240px;
display: block;
margin: 0 auto;
outline: none;
border:none;
border-radius: none; }
The thin border that appears when there is no src is because chrome is showing that in fact no image exists in the space that you defined. (Thanks to #Patrick Mlr for pointing it out.)
#Image {
background-image: url('http://i.stack.imgur.com/Dj7eP.jpg');
border-radius: 200px;
background-size: 240px;
display: block;
margin: 0 auto;
width:0px;
height:0px;
padding: 100px;
outline: none;
border-style: none;
border-radius: none; }
<div id="picture">
<input type='file' id="input">
<img [src]="url" id="Image">
<label for="uploadinput" id="uploadlabel">Upload Picture</label>
By modifying the color you can change the border width
{ border-width: 1px; border-color: rgb(160,160,255); }
Try removing the border on #picture:
#picture{
border:none;
}
Try this:
#Image {
background-image: url('http://i.stack.imgur.com/Dj7eP.jpg');
border-radius: 200px;
width: 200px;
height: 200px;
background-size: 240px;
display: block;
margin: 0 auto;
outline: none;
border:0;
border-radius: none;
}
I coded this simple CSS-trick to show when you click on the input (:focus) a tooltip will give you some information about the input. Everything is working but, the tooltip it's displayed below the input and not over. Actually I know that I can use margin to fix it, but I'm asking if there's a "more" clean way that when you use position absolute in this way, it will automatically align the tooltip over the input.
HTML:
<div>
<input type="text" placeholder="Username">
<span class="input_info">Info1</span>
</div>
<div>
<input type="text" placeholder="Password">
<span class="input_info">Info2</span>
</div>
CSS
.input_info {
display: none;
position: absolute;
background: #000;
border: 1px solid #fff;
color: #fff;
width: 100px;
margin-left: 80px;
}
input[type="text"]:focus + .input_info {
display: block;
}
https://jsfiddle.net/xzqsaobu/
You need to change display: block to display: inline-block, remove the margin-left and position: absolute;.
Your fiddle updated.
Snippet:
.input_info {
background: #000;
border: 1px solid #fff;
color: #fff;
width: 100px;
display: none;
}
input[type="text"]:focus + .input_info {
display: inline-block;
}
<div>
<input type="text" placeholder="Username">
<span class="input_info">Info1</span>
</div>
<div>
<input type="text" placeholder="Password">
<span class="input_info">Info2</span>
</div>
Here is how to do it with position: absolute and relative.
On the container, set position: relative, and display: table (shrink to fit).
For the position: absolute tooltip, set top: 0, and left: 100% (moves to the right edge of the relative container).
You can also horizonally center the fields in a page with this approach.
jsFiddle
.fieldset {
position: relative;
display: table;
/* margin: auto; */
}
.input_info {
position: absolute;
left: 100%;
top: 0;
background: #000;
border: 1px solid #fff;
color: #fff;
width: 100px;
display: none;
}
input[type="text"]:focus + .input_info {
display: block;
}
<div class="fieldset">
<input type="text" placeholder="Username">
<span class="input_info">Info1</span>
</div>
<div class="fieldset">
<input type="text" placeholder="Password">
<span class="input_info">Info2</span>
</div>