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
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 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
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 add a box shadow on two inputs next to each other, but the shadows are overlapping the inputs.
I've tried to add a position: relative and z-index to the inputs, but then the shadow overlap the input with the lowest z-index.
Is there a way to prevent the shadow from overlapping the other input next to it?
HTML:
<form method="post">
<input name="email" type="text" >
<input name="send" type="submit">
</form>
CSS:
.email {
height:45px;
width: 395px;
float: left;
box-shadow: 0 0 40px 6px rgba(0,0,0,0.65);
-webkit-appearance: none;
}
.search {
height: 45px;
width: 60px;
float: right;
box-shadow: 0 0 40px 6px rgba(0,0,0,0.65);
cursor: pointer;
-webkit-appearance: none;
}
Here is an example of what i mean:
Thanks :)
- Jesper
You have to wrap the two inputs into divs :
<form method="post">
<div class="input--email">
<input name="email" type="text" class="email">
</div>
<div class="input--search">
<input name="send" type="submit" class="search">
</div>
</form>
And give them the same shadows :
.input--email, .input--search {
float: left;
box-shadow: 0 0 40px 6px rgba(0,0,0,0.65);
height: 45px;
}
.input--email{
width: 395px;
}
.input--search{
margin-left: 15px;
width: 60px;
}
.email, .search {
width: 100%;
height: 100%;
position: relative;
-webkit-appearance: none;
}
.search {
cursor: pointer;
}
Here is a fiddle : http://jsfiddle.net/VLy6Q/