I am having trouble with an input of type file on IE11.
IE11 displays the input field as two tab-able pseudo elements (text/button).
I found the class ::-ms-browse which lets me set the button to display: none, but for some reason it is still tab-able.
To reproduce:
Click in text field
Tab into input type file (will only do two tabs in IE11)
The goal is to hide the input field and display a label as a button instead of the input field. For that it would be awkward to have to tab twice for one button.
input[type="file"]::-ms-browse {
display: none;
visibility: hidden;
}
input[type="file"]+label.fake-file-upload {
background: $white;
color: #999;
font-family: "Glober", sans-serif;
font-weight: 600;
font-size: 1.5rem;
padding: 0.75rem 4rem;
letter-spacing: 0.25rem;
cursor: pointer;
display: table;
}
input[type="file"]:focus+label.fake-file-upload {
outline: 2px dotted #444;
outline-offset: 5px;
border-spacing: 5px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
<input type="text" ><br><br>
<input type="file" id="upload-photo" name="photo" required>
<label for="upload-photo" class="fake-file-upload">DURCHSUCHEN</label>
After playing a bit with it I might have an idea :
If you want to be able to prevent the user from tabbing into the input, make the label tabbable and clickable, I would do this :
input[type="file"]::-ms-browse {
display: none;
visibility: hidden;
}
input[type="file"]+label.fake-file-upload {
background: $white;
color: #999;
font-family: "Glober", sans-serif;
font-weight: 600;
font-size: 1.5rem;
padding: 0.75rem 4rem;
letter-spacing: 0.25rem;
cursor: pointer;
display: table;
}
input[type="file"]:focus+label.fake-file-upload {
outline: 2px dotted #444;
outline-offset: 5px;
border-spacing: 5px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
<input type="text" ><br><br>
<input type="file" id="upload-photo" name="photo" required tabindex="-1">
<label for="upload-photo" class="fake-file-upload" tabindex="0">DURCHSUCHEN</label>
$('.fake-file-upload').keypress(function (e) {
var key = e.which;
if(key == 13) // the enter key code
{
$('.fake-file-upload').trigger("click");
return false;
}
});
Test case : https://jsfiddle.net/keystfjw/29/
Related
I have written the code for neumorphism power button and it is working perfectly fine but I'm not able to figure out how to display the status in the console using javascript, i.e., if the power button is on or off.
HTML code:
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<input type="checkbox">
</body>
CSS Code:
body{
background-color: black;
padding: 0;
margin:0;
}
input[type="checkbox"]{
height: 150px;
width: 150px;
-webkit-appearance: none;
box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.5),
10px 10px 15px rgba(0, 0, 0, 0.5);;
position: absolute;
transform: translate(-70%,-70%);
top: 20%;
left: 80%;
border-radius: 50%;
border: 8px solid black;
outline: none ;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
input[type="checkbox"]::after{
font-family:FontAwesome;
content:'\f011';
color: grey;
font-size: 70px;
}
input[type="checkbox"]:checked{
box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.5),
10px 10px 15px rgba(0, 0, 0, 0.5),
inset -10px -10px 15px rgba(0, 0, 0, 0.5),
inset 10px 10px 15px rgba(0, 0, 0, 0.5) ;
}
input[type="checkbox"]:checked::after{
color: green;
}
Add a change event listener to the power button, then check whether it is checked with the checked property:
document.querySelector('input').addEventListener('change', function() {
console.log(`Power button is${this.checked ? "" : " not"} checked`);
})
body {
background-color: black;
padding: 0;
margin: 0;
}
input[type="checkbox"] {
height: 150px;
width: 150px;
-webkit-appearance: none;
box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.5), 10px 10px 15px rgba(0, 0, 0, 0.5);
;
position: absolute;
transform: translate(-70%, -70%);
top: 20%;
left: 80%;
border-radius: 50%;
border: 8px solid black;
outline: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
input[type="checkbox"]::after {
font-family: FontAwesome;
content: '\f011';
color: grey;
font-size: 70px;
}
input[type="checkbox"]:checked {
box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.5), 10px 10px 15px rgba(0, 0, 0, 0.5), inset -10px -10px 15px rgba(0, 0, 0, 0.5), inset 10px 10px 15px rgba(0, 0, 0, 0.5);
}
input[type="checkbox"]:checked::after {
color: green;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<input type="checkbox">
</body>
Instead of posting answer I will try to guide you:
Think how will the state change - only when your input is changing. Initially it will be off.
On document load, attach an event handler for onchange on the input. Display the value using : event.target.checked . Here event is your change event.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I want to Create a Slider Form that displays different output fields on sliding using Javascript.
Somewhat of this kind.
Can anyone suggest to me how can I make it or give some links about a similar thing, I could not find googling.
I've made one of these in a recent project, I'll show you the code here. Essentially we create two forms and a topper. The topper is always shown, and we use flexbox to split it in half. With a JS onclick() event we can change which of the two forms are shown depending on if the user clicks on the signup header or the login header. Please make sure to try to code this on your own once you understand how the code works - it helps with learning front-end rather than copy-pasting the code and never writing it on your own! : )
function formSelector(selector) {
let signupElement = document.getElementById("signup")
let loginElement = document.getElementById("login")
let signupForm = document.getElementById("signupForm")
let loginForm = document.getElementById("loginForm")
if (selector == "signup") {
signup.classList.add("selectedHeader")
login.classList.remove("selectedHeader")
signupForm.classList.add("showForm")
loginForm.classList.remove("showForm")
}
else if (selector == "login") {
signup.classList.remove("selectedHeader")
login.classList.add("selectedHeader")
signupForm.classList.remove("showForm")
loginForm.classList.add("showForm")
}
}
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#200&display=swap");
body {
margin: 0;
padding: 0;
font-family: "poppins", "sans-serif";
overflow-x: hidden;
overflow-y: scroll;
--primary: rgb(4, 214, 4);
--primaryShade: rgb(15, 15, 15);
--secondaryShade: rgb(238, 240, 243);
scroll-behavior: smooth;
scroll-padding: 300px;
}
.formContainer {
background: var(--secondaryShade);
min-height: 100vh;
display: flex;
align-items: center;
transition: all 0.3s;
}
.form {
width: 500px;
margin: auto;
border-radius: 6px;
box-shadow: rgba(0, 0, 0, 0.04) 0 12px 60px 0;
background: rgb(255, 255, 255);
padding: 10px;
transition: all 0.3s;
}
.formContent {
padding: 15px 20px;
flex-wrap: wrap;
justify-content: center;
display: none;
animation: floatUp 0.6s;
position: relative;
}
.formInput {
border: 1.5px solid rgb(165, 165, 165);
padding: 10px;
outline: none;
transition: all 0.3s;
margin: 18px;
border-radius: 6px;
font-family: "poppins", sans-serif;
font-size: 18px;
}
.formInput:hover {
border-color: var(--primary);
}
.formInput:focus {
border-color: var(--primary);
box-shadow: rgba(0, 0, 0, 0.1) 0 3px 36px 0;
}
.formButton {
display: block;
width: 60%;
border: none;
outline: none;
cursor: pointer;
padding: 10px 0;
font-size: 17px;
border-radius: 6px;
transition: all 0.3s;
margin: 20px 0;
box-shadow: rgba(0, 0, 0, 0.22) 0 12px 24px 0;
background: var(--primary);
color: white;
font-family: "poppins";
font-weight: bold;
}
.formButton:hover {
box-shadow: rgba(0, 0, 0, 0.14) 0 6px 24px 0,
inset rgba(255, 255, 255, 0.247) 0 0 0 10000px;
}
.formButton:focus {
box-shadow: rgba(0, 0, 0, 0.26) 0 12px 36px 0,
inset rgba(255, 255, 255, 0.247) 0 0 0 10000px;
background: var(--primary);
color: white;
}
.formTopper {
background: rgb(236, 236, 236);
display: flex;
justify-content: space-around;
border-radius: 6px;
}
.formHeader {
width: 50%;
text-align: center;
margin: 4px;
padding: 4px;
border-radius: 6px;
font-weight: normal;
cursor: pointer;
transition: all 0.3s;
font-size: 28px;
}
.formHeader:hover {
background: rgb(219, 219, 219);
}
.selectedHeader {
background: white;
box-shadow: rgba(0, 0, 0, 0.13) 0 6px 45px 0;
}
.selectedHeader:hover {
background: white;
}
.showForm {
display: flex;
}
<div class="form">
<div class="formTopper">
<h1 class="formHeader selectedHeader" id="signup" onclick="formSelector('signup')">Signup</h1>
<h1 class="formHeader" id="login" onclick="formSelector('login')">Login</h1>
</div>
<div class="formContent showForm" id="signupForm">
<input class="formInput" placeholder="Username" />
<input class="formInput" placeholder="Email" />
<input class="formInput" placeholder="Passcode" />
<button class="formButton">Signup</button>
</div>
<div class="formContent" id="loginForm">
<input class="formInput" placeholder="Username" />
<input class="formInput" placeholder="Passcode" />
<button class="formButton">Login</button>
</div>
</div>
Stack:
Next.js
React-Bootstrap
styled-components
Problem
I've got this Bootstrap Button:
After clicking the button and minding my business it looks like this and I have no idea why, or how to change it. Any help is appreciated.
When overriding the :focus state with my default specs the button will look as its supposed to, but now the hover transition does not change.
Button Styling:
The button is styled like this:
import styled from 'styled-components';
import { Button } from 'react-bootstrap';
import { device } from '#/Components/styles';
export const LoginButton = styled(Button)`
border-radius: 5px;
border: solid 2px;
background: #e28215;
color: white;
border-color: white;
font-weight: 900;
font-size: 14px;
padding: 5px 10px;
${device.sm} {
font-size: 16px;
padding: 10px 20px;
}
${device.md} {
font-size: 18px;
padding: 10px 30px;
}
transition: all 0.2s ease-in-out;
-webkit-box-shadow: 0 24px 38px 3px #f7f7f72e, 0 9px 46px 8px #ffffff2b, 0 11px 15px -7px #000;
box-shadow: 0 24px 38px 3px #f7f7f72e, 0 9px 46px 8px #ffffff2b, 0 11px 15px -7px #000;
&:hover {
background: #ffffff;
color: #e28215;
border-color: #e28215;
-webkit-box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12),
0 11px 15px -7px rgba(0, 0, 0, 0.2);
box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12),
0 11px 15px -7px rgba(0, 0, 0, 0.2);
font-size: 16px;
padding: 5px 10px;
${device.sm} {
margin-top: -6px;
font-size: 18px;
padding: 12px 22px;
}
${device.md} {
margin-top: -6px;
font-size: 20px;
padding: 12px 34px;
}
}
`;
I've also put a bit of color customization into my bootstrap via theming like this in my custom.bootstrap.scss:
$theme-colors: (
'primary': #e28215,
'secondary': #83b8f3,
'tertiary': #1575e2,
...
);
Additional Info:
I've also looked into the states and when the button is in the stage state it seems like it is not active or anything:
I have unique id's for toggles being built dynamically within table rows and I got the css appropriately grabbing them using [attr*="checkbox"]; however, no matter which toggle I click only the top one toggles. I have 0 JS right now and I have no idea where to start with getting individual ones to toggle, since they're dynamically generated. I found how to set the attributes to true and false. But everything I have found online isn't straight forward.
<table class="table table-hover table-md ">
<thead>
<tr>
<td class="text-left tableHead">RoleId</td>
<td class="text-left tableHead">Role</td>
<td class="text-right tableHead">Delete</td>
</tr>
</thead>
#*--Table Body For Each to pull DB records--*#
<tbody>
#{int i = 0;}
#foreach (var role in Model.Roles)
{
<tr>
<td>#role.RoleID</td>
<td>#role.RoleName</td>
<td>
<input type="checkbox" name="checkbox" id="checkbox#(i)" class="ios-toggle"/>
<label for="checkbox#(i)" class="checkbox-label float-right"></label>
</td>
</tr>
i++;
}
</tbody>
</table>
css:
.ios-toggle, .ios-toggle:active {
position: absolute;
top: -5000px;
height: 0;
width: 0;
opacity: 0;
border: none;
outline: none;
}
.checkbox-label {
display: block;
position: relative;
/* padding: 10px; */
margin-bottom: 20px;
font-size: 12px;
line-height: 16px;
width: 35%;
height: 25px;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
background: #f8f8f8;
cursor: pointer;
}
.checkbox-label:before {
content: '';
display: block;
position: sticky;
z-index: 1;
line-height: 34px;
text-indent: 40px;
height: 25px;
width: 25px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
top: 0px;
left: 0px;
/* right: auto; */
background: white;
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,.2), 0 0 0 2px #dddddd;
-moz-box-shadow: 0 3px 3px rgba(0,0,0,.2),0 0 0 2px #dddddd;
box-shadow: 0 3px 3px rgba(0,0,0,.2), 0 0 0 2px #dddddd;
}
.checkbox-label:after {
content: attr(data-off);
display: block;
position: absolute;
z-index: 0;
top: 0;
left: -300px;
padding: 10px;
height: 100%;
width: 300px;
text-align: right;
color: #bfbfbf;
white-space: nowrap;
}
.ios-toggle:checked + .checkbox-label {
/*box-shadow*/
-webkit-box-shadow: inset 0 0 0 20px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
-moz-box-shadow: inset 0 0 0 20px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
box-shadow: inset 0 0 0 20px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
}
.ios-toggle:checked + .checkbox-label:before {
left: calc(100% - 36px);
/*box-shadow*/
-webkit-box-shadow: 0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3);
-moz-box-shadow: 0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3);
box-shadow: 0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3);
}
/* GREEN CHECKBOX */
[id*="checkbox"] + .checkbox-label {
/*box-shadow*/
-webkit-box-shadow: inset 0 0 0 0px rgba(19,191,17,1),0 0 0 2px #dddddd;
-moz-box-shadow: inset 0 0 0 0px rgba(19,191,17,1),0 0 0 2px #dddddd;
box-shadow: inset 0 0 0 0px rgba(19,191,17,1),0 0 0 2px #dddddd;
}
[id*="checkbox"]:checked + .checkbox-label {
/*box-shadow*/
-webkit-box-shadow: inset 0 0 0 18px rgba(0, 154, 68, 1),0 0 0 2px rgba(0, 154, 68, 1);
-moz-box-shadow: inset 0 0 0 18px rgba(0, 154, 68, 1),0 0 0 2px rgba(0, 154, 68, 1);
box-shadow: inset 0 0 0 18px rgba(0, 154, 68, 1),0 0 0 2px rgba(0, 154, 68, 1);
}
[id*="checkbox"]:checked + .checkbox-label:after {
color: #009A44 !important;
}
Not knowing the data from your model, I was able to make a makeshift table with your code. I changed your selector in your .css code from [id^="checkbox"] to "input:checkbox[id^='checkbox']". This will select your check boxes where their id's start with checkbox since it seems they all will. This also seems to select each individual checkbox as well. Hopefully this is a push in the right direction for you.
Working jsfiddle: https://jsfiddle.net/2kz1e5fd/
Provided below is a snippet from my html and css code, how and what would I need to add in not only html and css, but javascript as well to make this work as a slide in/out in the direction of (right to open) and (left to close) div?
<div id="left">
Edit Profile
Settings
Sign Out
</div>
#left { width: 338px; border-left: 1px solid #333; float: left; }
#left a {
width: 145px;
height: 22px;
padding: 5px 12px;
margin: 0;
border-bottom: 1px solid rgba(204, 204, 204, 0.09);
float: left;
display: inline-block;
position: relative;
top: 34px;
color: #15ADFF;
font: 16px Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
text-shadow: -1px -1px 1px #000, 2px 2px 3px rgba(110, 110, 110, 0.7);
}
#left a:hover {
width: 138px;
background: rgba(204, 204, 204, 0.4);
border-right: 7px solid #15ADFF;
color: #111;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.4);
}
I currently do not have any javascript written up for this as I do not know where to start with it...I am, however, using jquery-1.3.2
EDIT: If anyone can provide a jsfiddle, I'd greatly appreciate it ;)