What is the best way to customize a radio box like this. It should be for ie10, chrome, firefox.
I cant make everything by by own with css and javascript. is there a better way ?
concept:
Hide inputs, and style labels:
input[type='checkbox']{
display: none;
}
label{
border: 1px solid #ddd;
padding: 10px;
position: relative;
padding-left: 36px;
}
label::before{
position: absolute;
left: 10px;
top: 10px;
content: '';
box-shadow: 0px 0px 2px #999;
border: 2px solid #fff;
width: 12px;
height: 12px;
}
input:checked + label::before{
background: #ccc;
}
DEMO
I recently tried something like this and the following tutorials helped me
http://css-tricks.com/snippets/css/custom-radio-buttons/
http://www.hongkiat.com/blog/css3-checkbox-radio/
In my case I used the background-image solution
Related
I have a input tag with this css.
#myInput {
position: relative;
border: 1px solid #95B8E7;
background-color: #fff;
height: 30px;
vertical-align: middle;
display: inline-block;
overflow: hidden;
white-space: nowrap;
margin: 0;
padding: 0;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
I wanted my Input field value should be underline and ';' at the end. How should I write CSS for that.
Here is I am setting my input Value.
function selectItem(input, value) {
input.value += " "+value+";";
}
Add text-decoration: underline; to your CSS, and just call your function by selecting your HTML element, like so: selectItem(document.getElementById('myInput'),'foo').
Working Jsfiddle: https://jsfiddle.net/tacj0eeq/2/
Need help in making 2 bordered heading, one should according to content provided in HTML and second should be 100%, image is provided for reference.
I have tried it here
h3 {
position: relative;
font-size: 24px;
font-weight: 700;
color: #000;
text-transform: uppercase;
padding: 0 0 12px;
border-bottom: 3px solid #e64e52;
}
h3:before {
content: '';
position: absolute;
bottom: 0px;
width: 100%;
left: 0px;
border-bottom: 1px solid #000;
display: inline-block;
}
h3.display_inline {
display: inline-block;
}
<h3>HOT DEALS</h3>
<h3 class="display_inline">HOT DEALS</h3>
Problem what I am facing is both are running parallel, if I made it display: inline-block, then it will remain according to content and if display: block, then both will be 100%.
I am also open for JS solution :)
Help in the regards will highly appreciated.
Thanks in Advance.
You can add additional element (e.g. span) inside your h3 element, and style it separately like this:
h3 > span{
border-bottom: 2px solid blue;
display: inline-block;
}
h3{
padding-bottom: 10px;
border-bottom: 2px solid red;
}
<h3 class="display_inline">
<span>HOT DEALS</span>
</h3>
Thanks Champs for the contribution,
I have found my solution, pasting code to help others.
h3 {
position: relative;
font-size:24px;
text-transform: uppercase;
}
h3 > span {
border-bottom: 3px solid #e64e52;
display: inline-block;
position: relative;
z-index: 10;
padding-bottom: 15px;
}
h3:before {
border-bottom: 1px solid #e5e5e3;
position: absolute;
left: 0px;
bottom: 1px;
content: "";
width: 100%;
}
<h3 class="display_inline">
<span>HOT DEALS</span>
</h3>
<h3 class="display_inline">
<span>Inspiration & News</span>
</h3>
Special thanks to #Chris for the solution, I have use his Idea to make it exactly what I needed.
h3 {
position: relative;
font-size: 24px;
font-weight: 700;
color: #000;
text-transform: uppercase;
padding: 0 0 12px;
border-bottom: 3px solid #e64e52;
display: inline-block;
}
span {position:relative;
padding: 0;
width:100%;
display:block;
height: 66px;
}
span:before {
content: '';
position: absolute;
bottom: 0px;
width: 100%;
left: 0px;
border-bottom: 3px solid #ccc;
display:block;
}
<span><h3>HOT DEALS</h3></span>
I have an effect on CSS and JavaScript that makes a poster rounded in the title field of a link, in chrome looks good, but in Firefox it looks like a rectangle when should look like chrome.
What I'm trying is that the rounded edge is consistent with chrome and firefox.
Example :
http://i.imgur.com/ltQkAON.png
Source :
p#vtip {
word-wrap: break-word;
display: none;
position: absolute;
padding: 5px;
left: 5px;
font-size: 0.75em;
background-color: #666666;
border: 1px solid #666666;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
z-index: 9999;
color:white;
}
p#vtip #vtipArrow {
word-wrap: break-word;
position: absolute;
top: -10px;
left: 5px
}
.ok {
border:1px dotted green;
color:green;
padding:10px
}
.vtip2 {
word-wrap: break-word;
display: none;
position: absolute;
padding: 5px;
left: 5px;
font-size: 0.75em;
background-color: #666666;
border: 1px solid #666666;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
z-index: 9999;
color:white;
background:#312c2b;color:white;
}
.vtip{cursor:pointer;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.dropotron/1.4.3/jquery.dropotron.min.js"></script>
test
How I can accomplish this?
You should use border-radius instead of the browser specific variants. This would ensure browser compatibility not only with ff and chrome.
This for example works fine for your request:
<a style="border: 1px solid #000; border-radius: 5px;">Bla bla</a>
Also plain border-radius is supported by firefox and chrome since a looooong time ago (see http://www.w3schools.com/cssref/css3_pr_border-radius.asp).
Also I think -moz-border-radius was removed in newer versions of firefox (at least I can't seem to find it any more), but can't find any official post about it.
I was wondering if its able to have a square that has a point on the right side of it something like this in just one css:
http://prntscr.com/59wn94
I tried to make one just by using one div I wasn't able to manipulate enough its much easier for when creating a square then just add up a triangle right to it. but I want something that is on just on css like a combination of square and triangle-right.
Here is my http://jsfiddle.net/wbZet/1311/ . I just improvised some fiddle to create this stuff.
<div id="nav">
<a>PLAY</a>
</div>
<div id="triangle-up" />
#triangle-up {
width: 0;
height: 0;
border-left: 35px solid red;
border-bottom: 25px solid transparent;
border-top: 25px solid transparent;
float: left;
}
#nav {
float:left;
display: block;
height:50px;
padding: 0px 10px;
background: red;
}
#nav a {
margin: 25px 0px;
}
Use Pseudo-elements - CSS
div{
position: relative;/*it important to set this to relative to be able to use :before in absolute*/
width: 60px;
height: 40px;
background: red
}
div:before{
content: '';
position:absolute;
left: 100%;
top: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid red
}
<div>Play</div>
I've got the following div structure in my html layout.
<div class='main-container'>
<h5 class='hotel-name'></h5>
<div class='hotel-price'></div>
</div>
and the css is as following for each element.
.main-container {
position: relative;
border-bottom: 1px solid #EBEBEB;
height: 55px;
}
.hotel-name {
font-size: 13px;
font-weight: bold;
position: relative;
padding: 10px 0 0 20px;
display: inline-block;
white-space: nowrap;
}
.hotel-price {
display: inline;
float: right;
font-size: 100%;
font-weight: bold;
height: 55px;
padding: 6px 25px;
border-top: none;
border-right: 1px solid #EBEBEB;
border-bottom: 1px solid #EBEBEB;
border-left: 1px solid #EBEBEB;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
color: #3CA7B4;
}
I've not defined any width to any element. The content in each element is drawn dynamically. for example, the following image shows how the structure looks after all the data is loaded.
but my problem is there are some occasions where the name is long and the price just drops down.
example image of the issue.
How can I fix this issue. I'm building this layout using bootstrap 3.1 and my custom css.
Can you update your CSS?
.hotel-name {
font-size: 13px;
font-weight: bold;
position: relative;
padding: 10px 0 0 20px;
display: inline-block;
white-space: nowrap;
word-wrap: break-word; // <- New Line
}
Here's the reference on MDN
try this, use clearfix class
<p class="clearfix"></p>
Here is a working example using Flex box.
Flexbox is the new standard of designing and aligning.
http://jsfiddle.net/maxspan/t4QuH/
#mainDiv{
display:flex;
flex-wrap: nowrap;
width: 700px;
background-color: lightgray;
}
#innerDiv{
box-shadow:box-shadow: 2px 2px 2px #888888;
width:200px;
height:200px;
border:1px;
background-color: green;
padding:12px;
}
Using float is not a good idea if you just want the price to stay in the right lower corner.
position:absolute div in a position:relative div will help you better position your price tag.
Example:
.main-container {
position: relative;
border-bottom: 1px solid #EBEBEB;
height: 55px;
}
.hotel-price {
display: inline;
// ========== Here is the change =================
position: absolute;
bottom: 0px;
right: 0px;
// ===============================================
font-size: 100%;
font-weight: bold;
height: 55px;
padding: 6px 25px;
border-top: none;
border-right: 1px solid #EBEBEB;
border-bottom: 1px solid #EBEBEB;
border-left: 1px solid #EBEBEB;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
color: #3CA7B4;
}
You can try with display:table-cell css property
.hotel-name {
font-size: 13px;
font-weight: bold;
position: relative;
padding: 10px 0 0 20px;
display: table-cell;
white-space: nowrap;
}
.hotel-price {
display: table-cell;
font-size: 100%;
font-weight: bold;
height: 55px;
padding: 6px 25px;
border-top: none;
border-right: 1px solid #EBEBEB;
border-bottom: 1px solid #EBEBEB;
border-left: 1px solid #EBEBEB;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
color: #3CA7B4;
}