is this because of the inline block issue that safari not support ?
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
border: none;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}
#package-search input[type=search] {
color: transparent;
display: inline-block;
width: 80px;
height: 56px;
background: #fff url(assets/img/img/icon/search-b.png) no-repeat 30px 18px;
background-size: 23px auto;
border-radius: 28px;
cursor: pointer;
margin-top: 10px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
padding-left: 0;
}
#package-search input[type=search]:hover {
background-color: pink;
}
#package-search input[type=search]:focus {
width: 380px;
padding-left: 70px;
padding-right: 20px;
color: #343434;
background-color: pink;
cursor: auto;
}
#package-search input::-moz-placeholder {
color: transparent;
}
#package-search input::-webkit-input-placeholder {
color: transparent;
}
this button search has transitioned to get more width when we hover or click and it gonna block another div beside that button search icon
but on safari it doesn't block another div, the result that button box when we hover or click, it gonna be behind on that another div
what cause of this ? do I missing something?
look at this issue
look here and click
Related
I have an issue modifying my website. When I call Swal.fire(...), something like this happens:
Icon on the picture overflows and not renders properly(seems like scrollbar affects on icon render). How can I fix this? Thanks
Here is my custom css code:
* {
margin: 0px;
padding: 0px;
font-family: 'Roboto Mono', monospace;
overflow-x: hidden;
color: white;
user-select: none;
font-size: 20px;
}
h1 {
font-size: 60px;
}
body {
z-index: -2;
background-color: black;
}
#canvas1 {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
background: black;
}
.header {
text-align: center;
height: 100vh;
}
.header-title {
font-size: 70px;
font-weight: bold;
margin-top: 40vh;
}
section {
padding: 20vh;
}
.section-title {
font-size: 60px;
}
.section-text {
font-size: 25px;
}
footer {
height: 30vh;
background-color: rgb(24, 24, 24);
}
.navbar {
font-size: 40px;
position: fixed;
list-style-type: none;
overflow: hidden;
}
.navbar > li {
float: left;
}
.navbar > li a {
transition: .3s;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar > li a:hover {
background-color: rgba(255, 255, 255, 0.671);
}
input {
background-color: black;
margin: 20px;
}
.account-creator {
margin: auto;
width: 50%;
border: 3px solid white;
padding: 10px;
border-radius: 10px;
margin-top: 30vh;
padding: 10vh;
}
.account-creator {
margin-bottom: 100px;
}
.small-title {
font-size: 40px;
}
button {
background-color: black;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 35px;
overflow-y: hidden;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
top: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #f3214f;
}
input:focus + .slider {
box-shadow: 0 0 1px #f3214f;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.input_description{
font-size: 30px;
}
.simple-button {
background-color: #f3214f;
padding: 10px;
border-radius: 5px;
border: none;
transition: .4s;
margin: 30px;
}
.simple-button:hover {
transform: scale(1.2);
box-shadow: 0px 0px 10px #f3214faf;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-thumb {
background-image: linear-gradient(45deg, rgb(255, 115, 0) 0%, rgb(255, 0, 0) 100%);
border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover {
background-color: white;
background-image: none;
border-radius: 20px;
}
.clauses-field{
border: 3px solid white;
border-radius: 10px;
max-height: 300px;
position: absolute;
overflow-y: scroll;
margin-left: 40vw;
padding: 30px;
}
Idk maybe this code ruins everything, but it will be good if I don't need to change anything in here cause my website could just crash
For some resone you icon is overflowing so that orange line is scrollbar
add .sa-icon.sa-success { overflow:hidden }
this code in your css . if this dosent work , just inspect success icon and copy its class and add overflow:hidden to that.
if you still cant do it just copy popup code and add to your question , i will give you working code.
I want to create a button with a hidden input that activates once the button was pressed.
I made demo but in this demo input animated via changing width and padding which is not good.
So is there any better way to animate this button?
HTML:
<div class="button-wrap">
<label>Max score</label>
<input>
</div>
CSS:
.button-wrap {
display: flex;
height: var(--height);
outline: none;
--height: 20px;
--padding: 5px;
--background: #454555;
--background-active: #46467c;
--background-hover: #46467c;
--separator: #565666;
--radius: 5px;
--input-width: 30px;
--text-color: #eee;
}
input, label {
height: auto;
transition: .3s;
outline: 0;
color: var(--text-color);
text-align: center;
}
label {
display: inline;
width: 100%;
padding: var(--padding);
border-radius: var(--radius);
background-color: var(--background);
border-color: var(--separator);
transition: border-radius .5s;
user-select: none;
text-align: center;
}
input {
padding: var(--padding) 0;
border: none;
width: 0;
background-color: var(--background);
border-radius: 0 var(--radius) var(--radius) 0;
}
.button-wrap:hover label,
.button-wrap:hover input {
background-color: var(--background-hover);
}
.button-wrap[active] label {
border-radius: var(--radius) 0 0 var(--radius);
background-color: var(--background-active);
border-color: var(--separator);
border-right: 2px solid var(--separator);
transition: border-radius .3s;
}
.button-wrap[active] input {
width: calc(var(--input-width) - 2 * var(--padding));
background-color: var(--background-active);
padding: var(--padding);
}
Attribute 'active' is added by js after the button was pressed.
And there is the demo:
function myFunction(e) {
e.toggleAttribute("active").toggle;
}
.button-wrap {
display: flex;
outline: none;
--height: 20px;
--padding: 5px;
--background: #47478d;
--background-active: #46464f;
--background-hover: #46467c;
--separator: #565666;
--radius: 5px;
--input-width: 40px;
--text-color: #eee;
width: 250px;
height: 40px;
background:#34344d;
padding:15px;
}
input, label {
height: auto;
outline: 0;
color: var(--text-color);
text-align: center;
}
label {
display: flex;
width: 100%;
padding: var(--padding);
border-radius: var(--radius);
background-color: var(--background);
border-color: var(--separator);
transition: border-radius .5s;
user-select: none;
text-align: center;
align-items:center;
justify-content:center;
}
input {
padding: var(--padding);
border: none;
width: calc(var(--input-width) - 2 * var(--padding));
background-color: var(--background);
border-radius: 0 var(--radius) var(--radius) 0;
overflow: hidden;
display: none;
opacity: 0;
transition: display 0ms 400ms, opacity 400ms 0ms;
}
.button-wrap:hover label,
.button-wrap:hover input {
background-color: var(--background-hover);
}
.button-wrap[active] label {
border-radius: var(--radius) 0 0 var(--radius);
background-color: var(--background-active);
border-color: var(--separator);
border-right: 2px solid var(--separator);
transition: border-radius .3s;
}
.button-wrap[active] input {
background-color: var(--background-active);
padding: var(--padding);
color:#fff;
opacity: 1;
display:block;
transition: display 0ms 0ms, opacity 600ms 0ms;
}
<div class="button-wrap" onclick="myFunction(this)">
<label>Max score</label>
<input type="text" value="100">
</div>
So there's the answer that my teacher came up with.
HTML
<div class='button-wrap'>
<label>Max count</label>
<input>
</div>
CSS
.button-wrap {
width: 200px;
contain: content;
overflow: hidden;
border-radius: 5px;
position: relative;
outline: none;
height: 30px;
line-height: 20px;
background: #454555;
--input-width: 32px;
}
.button-wrap[active] {
background-color: #46467c;
}
.button-wrap:hover {
background-color: #46467c;
}
input, label {
height: 100%;
display: block;
box-sizing: border-box;
transition: transform .3s;
appearance: none;
outline: 0;
color: #eee;
border: none;
text-align: center;
background: transparent;
padding: 5px;
}
label {
width: 100%;
user-select: none;
}
input {
position: absolute;
top: 0;
right: 0;
border-left: 2px solid #565666;
width: var(--input-width);
transform: translateX(var(--input-width));
}
.button-wrap[active] label {
transform: translateX(calc(-1 * var(--input-width) / 2));
}
.button-wrap[active] input {
transform: translateX(0);
}
Here's the demo
I have been trying to build a search engine using basic HTML and CSS for my Uni but IE just doesnt seem to like text boxes. Works perfectly fine in Chrome and Edge but for some reason doesnt work well in IE.
Screenshots attached below.
Image in IE
Image in Chrome
Any help would be highly appreciated.
Code for the search box and the search text button:
.search-box {
position: absolute;
top: 260px;
left: 46%;
transform: translate(-50%, -50%);
background: #2f3640;
height: 60px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover > .search-text {
width: 350px;
padding: 0 6px;
}
.search-box:hover > .search-btn {
background: white;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
transition: 1s;
}
.search-text {
font-family: VFRegular;
border: 1px red solid;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
line-height: 40px;
width: 0px;
}
/*
.search-box:hover ~ .category-box {
width: 400px;
opacity: 1;
visibility: visible;
}
.category-box:hover {
width: 400px;
opacity: 1;
visibility: visible;
}
.category-box {
position: absolute;
align-items: center;
top: 38%;
left: 50%;
text-decoration-color: white;
transform: translate(-50%, -50%);
background: #2f3640;
height: 60px;
border-radius: 40px;
padding: 10px;
width: 0px;
color: white;
visibility: collapse;
opacity: 0;
transition: width 1s, height 1s, transform 1s;
transition: opacity 1s;
}
*/
.search-box > ul {
left: -100px;
background-color: #2f3640;
color: white;
border-radius: 10px;
list-style-type: none;
font-size: 15px;
}
.search-box > ul li {
left: -10px;
margin: 0 0 10px 0;
border-bottom: 1px solid white;
z-index: 1;
}
.search-box > ul li:last-child {
margin: 0 0 10px 0;
border-bottom: 1px solid transparent;
}
.search-box > ul li:hover {
color: red;
}
<div class="entire-searchbox">
<div class="search-box">
<input class="search-text" type="text" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
<ul id="testListDummy">
</ul>
</div>
</div>
Can you set 400px in .search-box class should be work
Try to add the height property for the .search-text, code as below:
.search-text {
font-family: VFRegular;
border: 1px red solid;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
line-height: 40px;
width: 0px;
height:58px;
}
The output as below:
I need vertical button with written vertical text inside. It should not be turned to 90 degree. I need to add some hover effect to right side if mouse on it and give white space between words. I have tried white-space and word-space but it did not help.
Example:
.button {
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
<script src="http://d3js.org/d3.v3.min.js"></script>
<button class="button" style="width:60px; height:600px; text-align:center;"><div style="width: 1ch; text-align:center; font: Consolas, Monaco, monospace;font-size:14pt; word-wrap: break-word;white-spacing: 3 px;">Online Sürücü Sifariş Et</div></button>
You can use transform:rotate(-90deg);
.button {
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
<button class="button" style=" text-align:center;">Online Sürücü Sifariş Et</button>
.button {
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
text-orientation: upright;
}
I think this is what you want. The button is a vertical button and the text is all one letter below the next. I have used <br> tags for every new line. Have a look
.button {
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
<script src="http://d3js.org/d3.v3.min.js"></script>
<button class="button" style="width:60px; height:600px; text-align:center;"><div style="width: 1ch; text-align:center; font: Consolas, Monaco, monospace;font-size:14pt; word-wrap: break-word;white-spacing: 3 px;">O<br>n<br>l<br>i<br>n<br>e<br><br>S<br>ü<br>r<br>ü<br>c<br>ü<br><br>S<br>i<br>f<br>a<br>r<br>i<br>ş<br><br>E<br>t<br></div></button>
There are several ways to accomplish what you're doing, but I like this one:
https://codepen.io/krabbypattified/pen/ybzway
It's a weird CSS attribute, but the imporant code is: white-space: pre-line;
Edit: there's also text-orientation, but that's not supported by many browsers.
Edit: updated the CodePen html
I have a dropdown menu. It consists of 3 buttons ontop of eachother so only the main button is visible. When you hover over the main button saying Raffles it will make the button move upwards. Then 1 of the other 3 buttons moves down and the last one stays still. This creates a compact dropdown menu. It works perfectly except for 1 problem. I have it set to that when you hover each one it will shift them into the positions the need to be. The problem is that when I start to hover over a different button (after they have shifted) they all start to shift again because I stop hovering over 1 button and start hovering over the next button. How can I prevent this from happening?
var dropdown = function() {
$('.inbutton, .dr1button, dr2button').hover(function() {
$('.inbutton').animate({
top: '-183px'
}, 200);
$('.dr2button').animate({
top: '0px'
}, 200);
}, function() {
$('.inbutton').animate({
top: '-122px'
}, 200);
$('.dr2button').animate({
top: '-61px'
}, 200);
});
};
$(document).ready(dropdown);
p.button {
padding: 0px 13px 0px 13px;
background-color: #333333;
float: left;
font-family: default_font;
font-size: 30;
color: white;
text-align: center;
line-height: 61px;
border-bottom: 1px solid #1C1C1C;
box-sizing: border-box;
height: 100%;
transition: height 0.2s ease;
}
p.button:hover {
height: 110%;
border-bottom: 0px;
cursor: pointer;
}
p.dbutton {
padding: 0px 13px 0px 13px;
background-color: #333333;
float: left;
font-family: default_font;
font-size: 30;
color: white;
vertical-align: middle;
line-height: 30.5px;
text-align: center;
border-bottom: 1px solid #1C1C1C;
box-sizing: border-box;
height: 100%;
transition: height 0.2s ease;
}
p.dbutton:hover {
height: 110%;
border-bottom: 0px;
cursor: pointer;
}
p.inbutton {
padding: 0px 13px 0px 13px;
background-color: #333333;
float: left;
font-family: default_font;
font-size: 30;
color: white;
text-align: center;
line-height: 61px;
border-bottom: 1px solid #1C1C1C;
box-sizing: border-box;
height: 100%;
position: relative;
top: -122px;
z-index: 98;
}
p.inbutton:hover {
border-bottom: 0px;
cursor: pointer;
}
p.dr1button {
background-color: #333333;
float: left;
font-family: default_font;
font-size: 30;
color: white;
text-align: center;
line-height: 61px;
height: 100%;
width: 144px;
position: relative;
z-index: 97;
transition: background-color 0.2s ease;
}
p.dr1button:hover {
background-color: #585858;
cursor: pointer;
}
p.dr2button {
background-color: #333333;
float: left;
font-family: default_font;
font-size: 30;
color: white;
text-align: center;
line-height: 61px;
height: 100%;
width: 144px;
position: relative;
top: -61px;
z-index: 98;
transition: background-color 0.2s ease;
}
p.dr2button:hover {
background-color: #585858;
cursor: pointer;
}
div.navbardivider {
height: 61px;
width: 1px;
background-color: #424242;
border-bottom: 1px solid #1C1C1C;
box-sizing: border-box;
float: left;
}
div.dropdown {
width: 144px;
float: left;
}
div.divider:hover {
cursor: pointer;
<div id="buttons">
<!--Home button-->
<p class="button">- Home</p>
<!--Divider-->
<div class="navbardivider"></div>
<!--Raffles Button-->
<div class="dropdown">
<a href="/raffles.php">
<p class="dr1button">Open</p>
</a>
<a href="/clraffles.php">
<p class="dr2button">Closed</p>
</a>
<p class="inbutton">Raffles</p>
</div>
<!--Divider-->
<div class="navbardivider"></div>
<!--Get tokens Button-->
<p class="dbutton">Get<br>Tokens</p>
<!--Divider-->
<div class="navbardivider"></div>
<!--Token lotto Button-->
<p class="dbutton">Token<br>Lotto</p>
</div>
Your problem is here:
$('.inbutton, .dr1button, dr2button').hover
You have a couple of problems. By triggering on the button individually you mouse out of one, before mousing over the other. It triggers the close before the reopen. This causes the bouncing effect. Also you are missing the "." in front of dr2button so it's not triggering the hover effect at all.
I'd use the wrapper instead:
$('.dropdown').hover
This way once you mouse over the dropdown it stays open until you mouse out. check out this fiddle: http://jsfiddle.net/r5Lyga84/