Why does it block you to select a file when you click on the button? If you put a span or div in the label, they allow you to select a file when you click on them, but the button does not
<html>
<body>
<label>
<input type="file">
<button class="upload" type="button"></button>
</label>
</body>
<style>
label {
display: block;
width: 100px;
height: 54px;
background: green;
}
input {
display: none;
}
.upload {
background: gold;
height: 100%;
}
</style>
</html>
the problem is that the button is a separate element it is not related to the input even if you wrapped them in one label
so to work around that you need to remove the button and style the label instead
CSS
label {
/* style the input here */
display: block;
width: 100px;
height: 54px;
background: green;
display: flex;
justify-content: center;
align-items: center;
color: white;
cursor: pointer;
/* more style .... */
}
input {
display: none;
}
HTML
<label>
select File
<input type="file">
</label>
Related
I want to display a pop-up when I click on my div.
Here is my html code :
<div class="test">
<!-- <input class="input input-readonly" type="text" placeholder="Code" [value]="id" readonly>-->
<div class="test input input-readonly">{{gameId}}</div>
<div class="test__popup">
<a [cdkCopyToClipboard]="id">{{'ID' | translate}}</a>
<a [cdkCopyToClipboard]="link">{{'LINK' | translate}}</a>
</div>
</div>
Mon fichier scss :
.test {
position: relative;
input {
cursor: pointer;
user-select: none;
}
&__popup {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
width: max-content;
padding: 10px;
background-color: $color-white;
box-shadow: $shadow-default;
flex-direction: column;
border-radius: 8px;
display: none;
a {
color: $color-primary-dark;
transition: color 100ms;
padding: 4px 0;
&:hover {
color: $color-primary-light;
}
}
}
&:focus-within .test__popup,
&:active .test__popup {
display: flex;
background-color: yellow;
}
}
In my HTML code I commented an input with the same class as my div. It works for my input but for my div when I click on it, the popup appears but disappears directly.
How to reproduce the same effect as with my input, ie my popup remains on the screen as long as I have not clicked elsewhere.
Try to make input with close-icon button,<input type=search> but I need more styling so I decided to make it on my own,but the problem is the position of input and label also moved slightly when want to clear input.
form.component.html
<div class="flex-center ">
<input class="input" [(ngModel)]="value">
<button *ngIf="value" class="button-close" (click)="value=''">
</button>
<label class="desc">description</label>
</div>
form.component.css
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.desc {
padding-left: 16px;
}
.button-close {
margin-left: -5%;
}
this is what I had tried so far, clereable input demo. need advice how to solve this,
The problem is that the button does not exist when the input is empty and when some text is entered, the button is inserted into the DOM taking some space which makes the label move. One way of putting the button on a different layer is to use position: absolute on an element.
Try something like this:
clearable-input.component.html
<div class="input-wrapper">
<input class="input" [(ngModel)]="value">
<button *ngIf="value" class="button-close" (click)="value=''">X</button>
</div>
<label>Description</label>
clearable-input.component.ts
.input-wrapper {
position: relative;
display: inline-block;
}
button {
position: absolute;
top: 50%;
right: 5px;
transform: translateY(-50%);
border: none;
background-color: transparent;
}
label {
margin-left: 15px;
}
Working demo
I wanted to try making custom radio buttons, however they only work on Chrome and Opera.
On Edge what I create using ::after is invisible, however on other browsers it is visible.
The problem seems to be visibility: hidden on radio. On Edge its children disappear, but on other Browsers visiblility:visible brings them back.
[type=radio] {
position: relative;
width: 50px;
height: 50px;
visibility: visible;
}
[type=radio]::after {
width: 50px;
height: 50px;
display: inline-block;
content: "";
background-color: pink;
visibility: visible;
border-radius: 100%;
}
<input type="radio">
The radio button in your code snippet doesn't change when clicked in Chrome. I made a demo in which the radio button's background-color will change to pink when clicked. I test it in Edge and Chrome and it works. You could check the code below.
input[type="radio"] {
display: none;
}
input[type="radio"] + label span {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 100%;
background-color: lightgray;
}
input[type="radio"]:checked + label span {
background-color: pink;
}
<input type="radio" id="radio01" name="radio" />
<label for="radio01"><span></span></label>
I've got a textbox in which I need to add a Symbol. This symbol should always be visible and not be used in code behind (when getting the value of the textbox) - basicall like a glymphicon icon. I've tried using a span but it is not displaying the way it should.
This is what I've done:
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon"><b>$</b></i></span>
#Html.TextBoxFor(m => m.AgreedValue, new { #class = "form-control", placeholder = "Agreed Value" })
</div>
This is how it's currently being displayed:
And this is what I need it to display like:
Is there anything I'm missing? or how can I get it to look like the 2nd image?
Its all about style, If Html can be changed, then this is my solution:
.input-group {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.input-text {
border: none;
height: 100%;
width: 100%;
background: transparent;
padding-left: 10px;
}
.input-text:focus {
outline: none;
}
.input-group {
padding-left: 10px;
width: 300px;
height: 40px;
border: 1.5px solid rgba(0,0,0,0.2);
box-sizing: border-box;
border-radius: 4px;
}
<div class="input-group">
<div>
<span class="input-group-addon"><i class="glyphicon"><b>$</b></i></span>
</div>
<input type="text" class="input-text">
</div>
I have a form input, and the label spans multiple lines, and I want the corresponding checkbox to appear at the bottom (last line of the label element).
Here is what I was playing with
CSS
.standard-form {
width: 500px;
border: 1px solid red;
}
.standard-form .input-row {
overflow: hidden;
margin-bottom: 0.8em;
}
.standard-form label {
width: 25%;
float: left;
}
.standard-form .input-container {
width: 70%;
float: right;
}
.standard-form .checkbox .input-container {
display: table-cell;
height: 100%;
vertical-align: text-bottom;
}
HTML
<form class="standard-form">
<div class="input-row checkbox" id="permission">
<label for="input-permission">
Do I hereby grant you permission to do whatever tasks are neccessary to achieve an ideal outcome? </label>
<div class="input-container">
<input type="checkbox" id="input-permission" name="permission" value="true" /> </div>
</div>
</form>
It is also online at JSbin.
Is there any way to do this? I notice that div.input-container isn't expanding, which is the old multi column problem with CSS.
I thought I could get this going with display: table-cell and vertical-align: bottom but I haven't been able to do it yet. I don't mind that IE6/7 won't render it correctly.
I have also tried using a combination of position: relative; with the child position: absolute; bottom: 0; except then I need to specify a height which I can not guarantee will be the height of the label on the left.
See my changes in action: http://jsbin.com/ocovu/2/edit
Here are the relevant declarations:
.standard-form .input-row {
overflow: hidden;
margin-bottom: 0.8em;
position: relative;
}
.standard-form .checkbox .input-container {
position: absolute;
bottom:-2px;
left:25%;
}
Tried display: block?