I have created an ion-input component.
Using the following html:
<ion-item mode="md" class="roundedInput">
<ion-label position="floating" id="inputlabel">{{labelname}}</ion-label>
<ion-input #form__input [type]="type" [(ngModel)]="value" [placeholder]="placeholder" ></ion-input>
</ion-item>
And the following CSS:
ion-item.md{
--border-color: var(--carbon-200, #767575);
--border-radius: 8px;
--border-width: 2px;
--box-shadow: 2px var(--carbon-400, #767575);
--highlight-height: 0;
--background: var(--coconut-000, #F1F0F0);
color: var(--carbon-200, #767575);
}
.roundedInput.item-has-focus {
--border-width: 0px;
--highlight-background: var(--secondary-500, #f0b601);
ion-label {
color: var(--secondary-500, #f0b601) !important;
}
}
And get the this input:
Input working correct
Then I have tried to adjust the height and add the property height this way:
ion-item.md{
--border-color: var(--carbon-200, #767575);
--border-radius: 8px;
--border-width: 2px;
--box-shadow: 2px var(--carbon-400, #767575);
--highlight-height: 0;
--background: var(--coconut-000, #F1F0F0);
color: var(--carbon-200, #767575);
height: 10px;
the input is cut off
Any suggestions are appreciated.
Related
I want my <input type="file" /> button to look like all my other buttons.
Now, it's easy with all browsers thanks to :
::file-selector-button (Firefox)
::-webkit-file-upload-button
::-ms-browse
This is what this input looks like in ShadowDOM :
<input type="file">
<button tabindex="-1">
<label>No file selected</label>
</input>
So, the button is within the input box so everything that's outsize this box is cropped (box-shadow and outline).
Do you have an idea to avoid this crop ?
I mean, I can add padding to the input but I have to calculate the border-radius spread, outline offset, correct padding with negative margins, etc.
I'm looking for something more flexible.
EDIT : overflow:visible on the input is not working. I don't know why
EDIT 2 : This is the default styling from resource://gre-ressource/forms.css (Firefox)
input[type=file] {
white-space: nowrap !important;
overflow: hidden !important;
overflow-clip-box: padding-box;
color: unset;
/* Revert rules which apply on all inputs. */
appearance: none;
-moz-default-appearance: none;
cursor: default;
border: none;
background-color: transparent;
padding: unset;
}
This explains why overflow:visible doesn't work. Also, playing with overflow-clip-box doesn't changes anything. It is set in forms.css however specifications say this property is not implemented in Firefox. Plus, there is a bug associated
EDIT 3 : Defining overflow: visible !important seems to override user agent styling, and it cancels overflow-clip-box: padding-box; as well but the overflowing content is still not visible.
Any workaround idea ?
:root {
--base-color: purple;
--file-border: 2px solid var(--base-color);
--file-border-radius: 5px;
--file-background: gold;
--file-box-shadow: 2px 2px 3px 0 #888;
--file-outline: 2px dadshed blue;
}
::file-selector-button {
color: var(--base-color);
border-radius: var(--file-border-radius);
background-color: var(--file-background);
border: var(--file-border);
box-shadow: var(--file-box-shadow);
}
::-webkit-file-upload-button {
color: var(--base-color);
border-radius: var(--file-border-radius);
background-color: var(--file-background);
border: var(--file-border);
box-shadow: var(--file-box-shadow);
}
::-ms-browse {
color: var(--base-color);
border-radius: var(--file-border-radius);
background-color: var(--file-background);
border: var(--file-border);
box-shadow: var(--file-box-shadow);
}
[type=file]:focus::file-selector-button{
outline: var(--file-outline);
outline-offset: 2px;
}
[type=file]:focus::-webkit-file-upload-button {
outline: var(--file-outline);
outline-offset: 2px;
}
[type=file]:focus::-ms-browse {
outline: var(--file-outline);
outline-offset: 2px;
}
Cropped box-shadow and outline (on focus) :
<p>
<input type="file" />
</p>
With padding :
<p>
<input type="file" style="padding: 5px"/>
</p>
With padding + correction :
<p>
<input type="file" style="padding: 5px;margin-left:-5px;margin-top:-5px"/>
</p>
It's not possible in Chrome and Firefox.
That's because user agent stylesheets from the rendering engines of these browsers (Blink and Gecko) declare overflow: hidden !important; inside the selector input[type=file]. Unfortunately, they can't be overrided due to CSS cascading order.
The !important rule in UA stylesheets will bypass even a JS solution (I tried).
I mean, I can add padding to the input but I have to calculate the border-radius spread, outline offset, correct padding with negative margins, etc.
You don't have to do the calculations, just use padding-bottom directly instead of setting padding on all sides.
Edit: You can also make another custom variable to control the padding in one place. Since you have no issue setting the shadow as custom property as well. See the snippet below:
:root {
--base-color: purple;
--file-border: 2px solid var(--base-color);
--file-border-radius: 5px;
--file-background: gold;
--file-box-shadow: 2px 2px 3px 0 #888;
--file-outline: 2px dashed blue;
--file-padding: 0 0 5px 0;
}
::file-selector-button {
color: var(--base-color);
border-radius: var(--file-border-radius);
background-color: var(--file-background);
border: var(--file-border);
box-shadow: var(--file-box-shadow);
}
::-webkit-file-upload-button {
color: var(--base-color);
border-radius: var(--file-border-radius);
background-color: var(--file-background);
border: var(--file-border);
box-shadow: var(--file-box-shadow);
}
::-ms-browse {
color: var(--base-color);
border-radius: var(--file-border-radius);
background-color: var(--file-background);
border: var(--file-border);
box-shadow: var(--file-box-shadow);
}
[type=file]:focus::file-selector-button {
outline: var(--file-outline);
outline-offset: 2px;
}
[type=file]:focus::-webkit-file-upload-button {
outline: var(--file-outline);
outline-offset: 2px;
}
[type=file]:focus::-ms-browse {
outline: var(--file-outline);
outline-offset: 2px;
}
input{
padding: var(--file-padding);
}
<p>
<input type="file" />
</p>
I have created a SCSS class section-readonly-input. This should not show borders. I now have the following problem, when I click on the input field a border is still shown. But this should not be. No border should be displayed.
My question is, how do I rewrite my SCSS so that no border is displayed when I click on it? I'm using the framework Bulma.
import React from "react";
import "./style/General.scss";
function General() {
return (
<div>
<div className="field">
<p className="control has-icons-left has-icons-right">
<input
className="section-readonly-input"
type="text"
value="This text is readonly"
readonly
/>
<span className="icon is-small is-left">
<i className="fas fa-futbol"></i>
</span>
</p>
</div>
</div>
);
}
export default General;
General.scss
.section-readonly-input {
outline: none !important;
border-width: 0px !important;
border: none !important;
&:hover {
outline: none !important;
border-width: 0px !important;
border: none !important;
}
&:focus {
outline: none !important;
border-width: 0px !important;
border: none !important;
}
}
The default browser agent stylesheet has the following for the input element when clicking on it.
:focus-visible {
outline: -webkit-focus-ring-color auto 1px;
}
We have to override this by setting
.section-readonly-input {
border: none;
&:focus-visible{
outline: none;
}
}
This will fix your problem
.section-readonly-input {
border: none;
}
.section-readonly-input:focus-visible{
outline: none;
}
<input class="section-readonly-input" type="text" value="This text is readonly" readonly />
input[type=text].section-readonly-input {
outline: none !important;
border-width: 0px !important;
border: none !important;
&:hover {
outline: none !important;
border-width: 0px !important;
border: none !important;
}
&:focus {
outline: none !important;
border-width: 0px !important;
border: none !important;
}
}
Try this.
Are you sure you should remove it? It is there for a reason.
https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html
I have custom input thumb on my range slider and I want it to change color when it is changed to disabled
I tried adding class to thumb like this
input[type=range]::-webkit-slider-thumb.disabled
and also tried adding disabled directive
input[type=range]::-webkit-slider-thumb:disabled
and none of these works.
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 2px solid #ffffff;
height: 22px;
width: 22px;
border-radius: 50%;
background: linear-gradient(#FF6C2C,#FF2626);
margin-top: -9px;
z-index: 4;
}
I'd like it to be similiar to this:
input[type=range]::-webkit-slider-thumb:disabled {
background: #CCCCCC;
}
Is there any option that it can be done? I'm not allowed to user jquery.
Never mind i've finally found solution it should look like this:
input[type=range].disabled::-webkit-slider-thumb{
background: #CCCCCC;
}
"disabled" class should be after input[type=range] and then it will work
Write like this and magic started:
`
input[type="range"]:disabled::-webkit-slider-thumb {
opacity: 0.6 !important;
cursor: context-menu !important;
}
input[type="range"]:disabled::-moz-range-thumb {
opacity: 0.6 !important;
cursor: context-menu !important;
}
input[type="range"]:disabled::-ms-thumb {
opacity: 0.6 !important;
cursor: context-menu !important;
}
`
#myrange{
-webkit-appearance: none;
outline:none;
border: 2px solid #ffffff;
border-radius: 20px;
box-shadow: inset 0 0 5px rgba(0,0,0,1);
overflow:hidden;
}
#myrange::-webkit-slider-thumb{
-webkit-appearance: none;
height: 15px;
width: 15px;
border-radius:50%;
background:#000000;
box-shadow: -410px 0 0 400px #007bff;
cursor:pointer;
}
<input style="" type= "range" id="myrange" name="point_count" min= "0" max = "100" value= "10" disabled >
I am creating some ionic3 small application. I tried to create like as whats app status page. I added ionic text area for that. but text input cursor not in a begin typing in middle. Does anyone know how to do that correctly?
Html
<ion-content>
<textarea #myInput id="myInput" rows="7" maxLength="300" (keyup)="resize()" [(ngModel)]="myStuff" text-center placeholder="Notifictaion here..."></textarea>
</ion-content>
css.
#myInput {
width: calc(100%);
border: 0;textAlignVertical: 'center';
border-radius: 0; font-size: 2rem;
background: #3e50b4; color: white;
}
you can understand my issue look at my attached image
Issue
I want to like this
Finally i do that , i put hsome padding for my css padding: 100px 10px 100px 10px; now its work for me
before
#myInput {
width: calc(100%);
border: 0;textAlignVertical: 'center';
border-radius: 0; font-size: 2rem;
background: #3e50b4; color: white;
}
then
#myInput {
width: calc(100%);
border: 0;textAlignVertical: 'center';
border-radius: 0; font-size: 2rem;
background: #3e50b4; color: white;
padding: 100px 10px 100px 10px;
}
I have this HTML that I can't change:
<label for="accept">I accept.</label>
<input id="accept" type="checkbox">
Now, I have to use the CSS to move the checkbox to the left and style it with a custom image.
What I usually do in CSS, when input goes before label is to make the label act like the checkbox by and hide the actual input:
input[ type=checkbox ] {
display:none;
}
input[ type=checkbox ] + label {
display:inline-block;
padding-left: 25px;
cursor: pointer;
height: 25px;
background: url('image.png') 0 -5px no-repeat;
}
input[ type=checkbox ]:checked + label {
background: url('image.png') 0 -40px no-repeat;
}
However, in this case, when I try:
input[ type=checkbox ] {
display:none;
}
label + input[ type=checkbox ] {
display:inline-block;
padding-left: 25px;
cursor: pointer;
height: 25px;
background: url('image.png') 0 -5px no-repeat;
}
label + input[ type=checkbox ]:checked {
background: url('image.png') 0 -40px no-repeat;
}
not only that it doesn't show the background, but it even unhides the checkbox, so I end up with the default checkbox after the label.
How do I go about doing this without using JavaScript?
It is not possible to target the label element using the CSS siblings selector like you try in the second code sample, since CSS selectors are read from right to left.
What you can do is to use a pseudo-element instead, and hide the input element using absolute positioning:
input {
position: absolute;
left: -999em; /* asuming direction: ltr */
}
input:before {
margin-left: 999em;
float: left;
content: "";
/* styles for visual demo */
height: 25px;
width: 25px;
margin-top: -4px;
background: #ddd;
border: 1px solid #000;
}
input:checked:before {
background: #0f0;
}
label {
display: inline;
padding-left: 35px;
line-height: 27px;
}
Working example on JSFiddle
It is a little tricky to make this work cross-browser since not all browsers allow pseudo-elements in inputs (according to spec, it is correct to not allow it), but it can be done in the browsers which supports it.
Reminder: in cases like this, always try to have the HTML changed first or ask for a compromise for the design (that is, ask if it would be ok to have the checkbox to the right instead of to the left). CSS is quite nasty in the edges, and should not always be the solution just because of the possibility.
You can customize default html check box using css. Please have a look at my fiddle.
Custom Checkbox Sample
.customCheckBoxDiv {
position: relative;
float: left;
}
.customCheckBoxDiv span {
margin-left: 25px;
color: #0066cc;
}
.loginCheckBox {
opacity: 0;
position: absolute;
z-index: 1;
cursor: pointer;
}
.checkLabel {
width: 13px;
height: 13px;
border: 1px solid #00cc00;
background: #fff;
position: absolute;
left: 4px;
top: 3px;
}
.loginCheckBox:checked + label {
border: 1px solid #00cc00 !important;
background: #00cc00 !important;
box-shadow: inset -2px 0px 0px 0px #fff, inset 2px 0px 0px 0px #fff, inset 0px -2px 0px 0px #fff, inset 0px 2px 0px 0px #fff !important;
}
<div class="customCheckBoxDiv">
<input type="checkbox" value="None" class="loginCheckBox" name="check" checked />
<label class="checkLabel"></label> <span>Remember Me</span>
</div>