I want to embed an image within an input field. I am using z-index but this is not working.
The markup looks like this:
<input class="form-control" type="text" id="cardNumber" name="cardNumber"
[(ngModel)]="payment.cardNumber" #cardNumber="ngModel" required>
<img src="..\assets\images\csc.jpg" id="inputImage">
And the CSS:
#inputImage {
height: 30px;
width: 30px;
position: absolute;
/* left: 0px;
right: 0px; */
z-index: 1;
}
Are you looking to add an image to the input? If so, you can just set the background of the input to the image you want.
Html:
<input class="form-control" type="text" id="cardNumber" name="cardNumber"
[(ngModel)]="payment.cardNumber" #cardNumber="ngModel" required>
CSS:
#cardNumber{
height: 30px;
width: 300px;
position: absolute;
z-index: 1;
background:url(https://cdn.pixabay.com/photo/2016/07/05/16/53/leaf-1498985_960_720.jpg) no-repeat right top;
}
Fiddle:
https://jsfiddle.net/zomzhacb/
You can also set the image as background:
HTML:
<input type="text" class="date-picker">
CSS:
.date-picker{
background: url(calendar.svg) no-repeat right;
}
DEMO
Related
The following HTML is being generates radio_buttons as selectors from an image label
<div class='small-2 columns buttonselector'>
<label for="content_ki_id_1">
<input class="invisi-selector" type="radio" value="1" name="content[ki_id]" id="content_ki_id_1" />
<img src="/assets/circle.svg" />
<div></div>
</label>
</div>
The CSS properly makes the radio button invisible, but there is a gap in handling the wrapper and its visibility on radio_button selected
.buttonselector > div {
width: 100%;
height: 100%;
background: #fff;
}
.invisi-selector {
opacity: 0;
}
.invisi-selector:checked + div {
border-color: #ba53ad;
border-width: 4px;
}
the wrapper cannot logically take the selector's class for it would be invisible. How can the checked action be binded to the wrapping div?
It can't, but you can use absolute positioning to make it look like it is.
.buttonselector>label {
width: 100%;
height: 100%;
background: #fff;
display: block;
position: relative;
}
.invisi-selector {
opacity: 0;
position: absolute;
}
.invisi-selector~div {
z-index: -1;
position: absolute;
left: -4px;
top: -4px;
width: 100%;
height: 100%;
}
.invisi-selector:checked~div {
border: 4px solid #ba53ad;
}
<div class='small-2 columns buttonselector'>
<label for="content_ki_id_1">
<input class="invisi-selector" type="radio" value="1" name="content[ki_id]" id="content_ki_id_1" />
<img src="/assets/circle.svg" />
<div></div>
</label>
</div>
I used custom checkbox and radio button for my project using :before and :after, but this work only in "Google Chrome" and not supported in other browsers, Is any trick that's why it should look same in all browser, I don't want to use label after checkbox or radio button.
CSS is here:
FIDDLE ( For example )
My actual radio button looks like this :
Google Chrome:
Firefox:
IE:
Pseudo Elements like :before and :after add content before and after the content of an element. Checkbox and Radio buttons do not have content, so they don't support before and after pseudo elements. Chrome is ' special ' , but the normal behavior is the one from FF and IE.
Furthermore checkbox and radio are browser default elements. They are very hard to change and not supposed to be changed.
Although you said you don't want to add a label, that's the way to go. Add it with position absolute to put it on top of the radiobutton/checkbox like in the example below
body {
padding: 50px;
}
input[type='radio'] {
margin: 0;
height: 13px;
width: 13px;
margin-top: 2px;
position: relative;
}
div.wrapper {
position: relative;
}
input[type='radio'] + label {
content: '';
display: inline-block;
width: 13px;
height: 13px;
border: none;
position: absolute;
left: 0;
top: 1px;
background: gray url("../images/i-radio-empty.png") no-repeat 0 0;
}
input[type='radio']:checked + label {
width: 13px;
height: 13px;
background: red url("../images/i-radio-checked.png") no-repeat 0 0;
}
<div class="wrapper">
<input type="radio" name="gender" value="male" id="male"> Male
<label for="male"></label>
</div>
<div class="wrapper">
<input type="radio" name="gender" value="female" id="female"> Female
<label for="female"></label>
</div>
<div class="wrapper">
<input type="radio" name="gender" value="other" id="other"> Other
<label for="other"></label>
</div>
Mihai T's solution isn't bad, but not checking checkbox when cliking on text can be really anoying. I personally hate it :)
Though it is true that radio and chekbox does not support pseudo elemens :before and :after but label does. So you can have normal label with text and pseudo element :before with position: absolute.
div.wrapper {
position: relative;
display: inline-block;
margin-right: 10px;
}
input[type='radio'] {
display: none;
}
input[type='radio'] + label {
padding-left: 20px;
}
input[type='radio'] + label:before {
content: '';
width: 13px;
height: 13px;
position: absolute;
left: 0;
top: 1px;
background: #FFF;
border: 1px solid #999;
border-radius: 50%;
cursor: pointer;
box-sizing: border-box;
}
input[type='radio']:checked + label:before {
background: #000;
border: 4px solid #F9CC55;
}
<div class="wrapper">
<input type="radio" name="gender" value="male" id="male">
<label for="male">Create Tabs Group</label>
</div>
<div class="wrapper">
<input type="radio" name="gender" value="female" id="female">
<label for="female">Update Existing Tabs Group</label>
</div>
I made a form with checkbox as a forest image. I need to place another transparent background with text from html parameter (data-forest) over the forest checbox image but I have to do this only by CSS. I've tried so many solutions but no one work properly. Anyone have some idea?
Final effect on hover:
JsFiddle: https://jsfiddle.net/ac9z8sgd/
HTML
<form action="action" method="get">
<input type="hidden" name="test" value="test" />
<ul>
<li><input id="checkbox" type="checkbox" name="forest_type" value="forest_1"><label for="checkbox_forest" data-forest="Estern forest">Forest 1</label></li>
</ul>
<button type="submit">Submit</button>
</form>
CSS
/* Default check button */
#checkbox + label {
background: url('http://i.imgur.com/Ds7gh7b.jpg?1');
background-repeat: no-repeat;
height: 250px;
width: 250px;
padding: 15px 15px;
display: inline-block;
position: relative;
}
/* Hover action */
#checkbox + label[data-forest]:hover {
background: rgba(0,0,0,0.8);
content: attr(data-forest);
display: inline-block;
font-size: 20px;
color: white;
position: relative;
}
Use a pseudo-element.
/* Default check button */
#checkbox + label {
background: url('http://i.imgur.com/Ds7gh7b.jpg?1');
background-repeat: no-repeat;
height: 275px;
width: 184px;
display: inline-block;
position: relative;
}
/* Hover action */
#checkbox + label[data-forest]:hover::after {
background: rgba(0, 0, 0, 0.8);
content: attr(data-forest);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
font-size: 20px;
color: white;
display: flex;
}
<form action="action" method="get">
<input type="hidden" name="test" value="test" />
<ul>
<li>
<input id="checkbox" type="checkbox" name="forest_type" value="forest_1">
<label for="checkbox_forest" data-forest="Estern forest">Forest 1</label>
</li>
</ul>
<button type="submit">Submit</button>
</form>
JSfiddle with Transitions
My suggestion:
label[data-forest]:hover:before {
background: rgba(0,0,0,0.8);
content: attr(data-forest);
font-size: 20px;
color: white;
margin-top: 240px;
margin-left: -15px;
position: absolute;
width: 100%;
text-align: center;
}
BTW: Maybe 0.8 is too much a high value for a perceptible transparency. I'd make it 0.4.
I'm trying to align a div containing only one select as shown below, but it does not work.
No matter what option I choose for vertical-align, nothing happens.
Below is the css for the div of class styled-select and the select inside.
div.styled-select {
width: 100px;
height: 17px;
overflow: hidden;
background: url(../../../../images/downarrow_blue.png) no-repeat right white;
display: inline-block;
position:relative;
float: left;
vertical-align: sub
}
.styled-select select {
background: transparent;
-webkit-appearance: none;
width: 117px;
height: 17px;
border: 0;
position: absolute;
left: 0;
top: 0;
}
// HTML code
<p/>
<form action="/prepareUpdateCategoryList.do?forwardto=search">
<fieldset class="block">
<label style="width:80px">Class</label>
<div class="styled-select">
<select>
<option value="0">Select </option>
<option value="7382">steam </option>
</select>
</div>
<input type="text" name="fname">
<input type="submit" value="Submit">
</fieldset>
</form>
if u just want it to align no matter how, then just use margin-top.
div.styled-select {
width: 100px;
height: 17px;
overflow: hidden;
background: url(../../../../images/downarrow_blue.png) no-repeat right white;
display: inline-block;
position:relative;
float: left;
vertical-align: sub;
margin-top:5px;
}
Fiddle here
I'm trying to overlay a "search box" over a Google Maps API V3. The overlay works fine in Fx5, but in IE9 it does not work quite right. Some white space is added by IE9 between the map and the gray div. To see the difference, go to:
http://www.trailheadfinder.com/trail_search/trail_map
The "search box" should be aligned with the Map/Sattelite/MyTopo buttons.
HTML
<div id="maplayers">
Select information to be shown:
Trails: <input type="checkbox" id="trailsbox" onclick="boxclick(this,'trails')" />
Campgrounds: <input type="checkbox" id="campgroundsbox" onclick="boxclick(this,'campgrounds')" />
Panoramio: <input type="checkbox" id="panoramiobox" />
</div>
<div>
<div id="mapsearchbar">
<input id="searchTextField" type="text" size="50">
</div>
<div id="map" style="width: 100%; height: 500px"></div>
</div>
CSS
<style type="text/css">
#mapsearchbar {
float: right;
position: relative;
right: 200px;
top: 5px;
z-index: 999;
}
#maplayers {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
margin-top: 20px;
background-color: #C4C4C4;
}
</style>
The gap is there because you are giving it a position of relative and then offsetting is using top: 5px; right: 200px. This cause it to move but leave a gap in its origional position. Do as follows.
div
{
position: relative;
}
div#mapserachbar
{
position: absolute;
top: 5px;
right: 170px;
}
And remove float:right from it.