I have a radio button I want round border inside it .
Here is how it should look
input[type='radio']:after {
width: 15px;
height: 15px;
border-radius: 15px;
top: -2px;
left: -1px;
position: relative;
background-color: #d1d3d1;
content: '';
display: inline-block;
visibility: visible;
border: 2px solid white;
}
input[type='radio']:checked:after {
width: 15px;
height: 15px;
border-radius: 15px;
top: -2px;
left: -1px;
position: relative;
background-color: #000;
font-weight: bolder;
content: '';
display: inline-block;
visibility: visible;
border: 2px solid white;
}
<input id="delivery_option_13687_1" class="delivery_option_radio" type="radio" name="delivery_option[13687]" data-key="234," data-id_address="13687" value="234," checked="checked">
I am not able to get what I want, what do I need to change to get what I want?
Try this one
input{
position:relative;
}
input#inputRadioID:before {
width: 15px;
height: 15px;
border-radius: 15px;
top: -2px;
left: -1px;
position: relative;
background-color: #d1d3d1;
content: '';
display: inline-block;
visibility: visible;
border: 2px solid white;
}
input#inputRadioID:checked:after {
width: 9px;
height: 9px;
border-radius: 100%;
top: 1px;
left: 2px;
position: absolute;
background-color: #000;
font-weight: bolder;
content: '';
display: inline-block;
visibility: visible;
border: 2px solid white;
}
input#inputRadioID:checked:before {
background-color: #000;
}
<input id="inputRadioID" class="delivery_option_radio" type="radio" name="delivery_option[13687]" data-key="234," data-id_address="13687" value="234,">
Related
I'm trying to solve an exercise but I can not do it.
In theory I have to move the ::before and ::after elements of the .calendar element in the proper way so they can be placed just like the picture.
Please move the ::before and ::after of the element in the proper way so they can be placed just like the picture.
Change their colors as well so they can have the same color, and apply the border-radius to the ::before and ::after of the to make them look like a ring in 2 dimensions seen from the front.
.calendar {
top: 0em;
left: 1em;
padding-top: 5px;
width: 80px;
background: #ededef;
font-size: 54px;
text-align: center;
color: #000;
border-radius: 3px;
position: absolute;
}
.calendar em {
display: block;
font-size: 15px;
color: #fff;
background: #04599a;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.calendar:before,
.calendar:after {
content: "";
float: left;
width: 8px;
height: 8px;
background: #111;
z-index: 1;
border-radius: 10px;
box-shadow: 0 1px 1px #fff;
position: absolute;
}
.calendar:before {
left: 11px;
}
.calendar:after {
right: 11px;
}
.calendar em:before,
.calendar em:after {
content: "";
float: left;
margin: 10px;
width: 5px;
height: 15px;
background: grey;
z-index: 5;
border-radius: 50px;
position: absolute;
}
.calendar em:before {
left: 30px;
}
.calendar em:after {
right: 13px;
top: -16px;
left: 2px;
bottom: 10px;
position: absolute;
}
<p class="calendar">7 <em></em></p>
You shouldn't be using floats in general. They needlessly complicate positioning and aren't necessary. There are more modern ways to align things if that's what you're after.
Mostly, just position your elements with top and left:
.calendar {
top: 0em;
left: 1em;
padding-top: 5px;
width: 80px;
background: #ededef;
font-size: 54px;
text-align: center;
color: #000;
border-radius: 3px;
position: absolute;
}
.calendar em {
display: block;
font-size: 15px;
color: #fff;
background: #04599a;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.calendar:before,
.calendar:after {
content: "";
width: 8px;
height: 8px;
background: #111;
z-index: 1;
border-radius: 10px;
box-shadow: 0 1px 1px #fff;
position: absolute;
top: 5px;
}
.calendar:before {
left: 11px;
}
.calendar:after {
right: 11px;
}
.calendar em:before,
.calendar em:after {
content: "";
margin: 10px;
width: 5px;
height: 15px;
background: grey;
z-index: 5;
border-radius: 50px;
position: absolute;
top: -16px;
}
.calendar em:before {
left: 52px;
}
.calendar em:after {
right: 13px;
left: 2px;
bottom: 10px;
position: absolute;
}
<p class="calendar">7 <em></em></p>
This question already has answers here:
Speech bubble with arrow
(3 answers)
how to style chat-bubble in iphone classic style using css only
(4 answers)
CSS speech bubble with rounded arrow
(2 answers)
How to create a curve tail for speech bubble with CSS?
(1 answer)
How to make a box with arrow in CSS?
(7 answers)
Closed 2 years ago.
I want to create chat icon using css only. Here's a sample of it:
I don't want to use bootstrap chat icons because it's hard to customize especially the numbers inside the icon grows.
This is a bit like what you have in your request.
.msg1,
.msg2 {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
}
.msg1 {
width: 30px;
height: 25px;
border-radius: 12px;
background-color: #ff6781;
color: white;
}
.msg2 {
width: 35px;
height: 23px;
border-radius: 12px;
border: 2px solid #ff6781;
color: #ff6781;
}
.msg1 p,
.msg2 p {
font-size: 14px;
}
.msg1:after {
content: '';
position: absolute;
background-color: #ff6781;
top: 89%;
left: 35%;
width: 3px;
height: 7px;
transform: rotate(-45deg);
}
.msg1:before {
content: '';
position: absolute;
background-color: #ff6781;
top: 89%;
left: 48%;
width: 3px;
height: 7px;
transform: rotate(45deg);
}
.msg2:after {
content: '';
position: absolute;
background-color: #ff6781;
top: 100%;
left: 35%;
width: 3px;
height: 6px;
transform: rotate(-45deg);
}
.msg2:before {
content: '';
position: absolute;
background-color: #ff6781;
top: 100%;
left: 40%;
width: 3px;
height: 6px;
transform: rotate(45deg);
}
<div class="msg1"><p>4</p></div>
<div class="msg2"><p>11</p></div>
second solution:
.msg1,
.msg2 {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
}
.msg1 {
width: 30px;
height: 25px;
border-radius: 12px;
background-color: #ff6781;
color: white;
}
.msg2 {
width: 35px;
height: 23px;
border-radius: 12px;
border: 2px solid #ff6781;
color: #ff6781;
}
.msg1 p,
.msg2 p {
font-size: 14px;
}
.msg1:after {
content: '';
position: absolute;
top: 100%;
left: 33%;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 10px solid #ff6781;
}
.msg2:after {
content: '';
position: absolute;
top: 100%;
left: 25%;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 10px solid #ff6781;
}
<div class="msg1"><p>4</p></div>
<div class="msg2"><p>11</p></div>
.chat-icon {
color: #161616;
position: relative;
height: 30px;
width: 60px;
font-size: 1.4rem;
}
.balloon {
display: flex;
position: absolute;
justify-content: center;
border: 2px solid red;
align-items: center;
background-color: white;
border-radius: 2rem;
height: 20px;
width: 100%;
z-index: 2;
}
.stick {
width: 20px;
position: absolute;
height: 8px;
background-color: red;
margin-left: 0.5rem;
transform: rotate(45deg);
top: 15px;
}
<div class="chat-icon">
<div class="balloon">10</div>
<div class="stick"></div>
</div>
i have this css tootlip code:
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
width:140px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.tooltips span:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-top: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.8;
bottom: 30px;
left: 50%;
margin-left: -76px;
z-index: 999;
}
I want it to auto resize based on the text lenght. (long or short)..how i can do it? Thank you.
Get rid of; width:140px; from the class a.tooltips span
I have two divs that wrap both an input box and an icon that displays Tooltip text when hovered over. Due to me needing to have the divs stack on each other, they have 'position: relative;'. When I hover over the first Tooltip icon, the Tooltip text is too large to be contained within its wrapper div. However, instead of the text being completely visible, it gets buried under the second wrapper div.
I want my visual design to be exactly the same as it is, the only difference being that the Tooltip rises on top of the div that is currently burying it. Is there any way to go about this without doing an overhaul of my code?
https://jsfiddle.net/jlcollier/nw45knLy/1/
HTML:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="inputblock">
<input class="inputseperate" type="text" name="a"><br>
<div class="help-tip">
<p>aaaaaaaaa<br>aaaaaaaaa<br>aaaaaaaaa<br>aaaaaaaaa<br>aaaaaaaaa</p>
</div>
</div>
<div class="inputblock">
<input class="inputseperate" type="text" name="b"<br>
<div class="help-tip">
<p>bbbbbbbbb<br>bbbbbbbbb<br>bbbbbbbbb<br>bbbbbbbbb<br>bbbbbbbbb</p>
</div>
</div>
</body>
</html>
CSS:
.inputseperate {
width:70%;
}
.inputblock {
margin-bottom:30px;
width:100%;
background-color: #ccc;
border-radius: 5px 5px 5px 5px;
position: relative;
}
.help-tip{
position: absolute;
top: 0px;
right: 5px;
text-align: center;
background-color: #333;
border-radius: 50%;
width: 24px;
height: 24px;
font-size: 14px;
line-height: 26px;
cursor: default;
}
.help-tip:before{
content:'?';
font-weight: bold;
color:#fff;
}
.help-tip:hover p{
display:block;
transform-origin: 100% 0%;
}
.help-tip p{
display: none;
text-align: left;
background-color: #1E2021;
padding: 20px;
width: 300px;
position: absolute;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
right: -4px;
color: #FFF;
overflow: visible;
font-size: 13px;
line-height: 1.4;
}
.help-tip p:before{
position: absolute;
content: '';
width:0;
height: 0;
border:6px solid transparent;
border-bottom-color:#1E2021;
overflow: visible;
right:10px;
top:-12px;
}
.help-tip p:after{
width:100%;
height:40px;
content:'';
position: absolute;
overflow: visible;
top:-40px;
left:0;
}
Add the z-index property to .help-tip
fiddle
.inputseperate {
width: 70%;
}
.inputblock {
margin-bottom: 30px;
width: 100%;
background-color: #ccc;
border-radius: 5px 5px 5px 5px;
position: relative;
}
.help-tip {
position: absolute;
top: 0px;
right: 5px;
text-align: center;
background-color: #333;
border-radius: 50%;
width: 24px;
height: 24px;
font-size: 14px;
line-height: 26px;
cursor: default;
z-index: 1;
}
.help-tip:before {
content: '?';
font-weight: bold;
color: #fff;
}
.help-tip:hover p {
display: block;
transform-origin: 100% 0%;
}
.help-tip p {
display: none;
text-align: left;
background-color: #1E2021;
padding: 20px;
width: 300px;
position: absolute;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
right: -4px;
color: #FFF;
overflow: visible;
font-size: 13px;
line-height: 1.4;
}
.help-tip p:before {
position: absolute;
content: '';
width: 0;
height: 0;
border: 6px solid transparent;
border-bottom-color: #1E2021;
overflow: visible;
right: 10px;
top: -12px;
}
.help-tip p:after {
width: 100%;
height: 40px;
content: '';
position: absolute;
overflow: visible;
top: -40px;
left: 0;
}
<div class="inputblock">
<input class="inputseperate" type="text" name="a"><br>
<div class="help-tip">
<p>aaaaaaaaa<br>aaaaaaaaa<br>aaaaaaaaa<br>aaaaaaaaa<br>aaaaaaaaa<br>aaaaaaaaa</p>
</div>
</div>
<div class="inputblock">
<input class="inputseperate" type="text" name="b" <br>
<div class="help-tip">
<p>bbbbbbbbb<br>bbbbbbbbb<br>bbbbbbbbb<br>bbbbbbbbb<br>bbbbbbbbb<br>bbbbbbbbb</p>
</div>
</div>
For some reason my toggle button styles are not working in IE11. The input button should be a green circle but it's showing as a square box with a quite background and black border in IE11:
Here is how it is intended to look:
My code:
.toggle-field {
position: relative;
padding-top: 0.35rem;
}
.toggle-field .Toggle {
padding-left: 75px;
}
.toggle-field .toggle-element {
position: absolute;
top: 0;
left: 0;
width: 68px;
height: 34px;
border-radius: 18px;
border: 2px solid #ccc;
}
.toggle-field input {
appearance: none;
display: block;
position: absolute;
left: 4px;
top: 4px;
width: 26px;
height: 26px;
background: #ccc;
border-radius: 15px;
transition: left 117ms ease;
border: none;
}
.toggle-field input:focus + .toggle-element {
border-color: #aaa;
}
.toggle-field b {
position: absolute;
font-weight: normal;
line-height: 34px;
top: 1px;
left: 40px;
font-size: 0.65rem;
}
.toggle-field .Toggle.On input {
left: 38px;
background: #2ea664;
}
.toggle-field .Toggle.On b {
left: 12px;
}
<div class="field toggle-field null">
<label for="button1" class="Toggle On">
<input type="checkbox" id="button1" name="button1" value="on">
<span class="toggle-element"></span>
<b>YES</b> Question goes here
</label>
</div>
Most of what I have read says that I need to have a certain compatibility tag included, which I have:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Not sure what else to do. Has anyone else had this issue before?
I found a different way of doing this that works in IE11.
.toggle-field {
position: relative;
padding-top: 0.35rem;
}
.toggle-field .Toggle {
padding-left: 80px;
}
.toggle-field input {
appearance: none;
display: block;
position: absolute;
left: 6px;
top: 4px;
width: 26px;
height: 26px;
background: #ccc;
border-radius: 15px;
transition: left 117ms ease;
border: none;
}
.toggle-field .toggle-element {
background-color: #fff;
border: 2px solid #ccc;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: .4s;
width: 68px;
height: 32px;
}
.toggle-element:before {
background-color: #ccc;
bottom: 3px;
content: "";
height: 26px;
left: 4px;
position: absolute;
transition: .4s;
width: 26px;
}
input:checked + .toggle-element {
background-color: #fff;
}
input:checked + .toggle-element:before {
transform: translateX(34px);
background-color: #2ea664;
}
.toggle-element {
border-radius: 34px;
}
.toggle-element:before {
border-radius: 50%;
}
<div class="field toggle-field null">
<label for="checkbox" class="Toggle On">
<input type="checkbox" id="checkbox" />
<span class="toggle-element"></span>
</label>
</div>