How can I quit the borders of a input in JQuery Mobile?
This is my code:
<div class="ui-block-a">
<label for="textinput_nick" class="ui-hidden-accessible" data-t="form_nick"></label>
<input type="text" name="nick" id="textinput_nick" placeholder="form_nick" value="" data-mini="true" maxlength="80">
</div>
As of jQuery Mobile 1.4, you can apply custom CSS to input without any JS intervention. Create a custom class and add it to input by using data-wrapper-class attribute.
Custom CSS
.ui-input-text.ui-custom {
border: none;
box-shadow: none;
}
Add it to input
<input type="text" data-wrapper-class="ui-custom" />
Demo
In jQuery Mobile 1.3 & earlier, input is invisible and replaced with a div .ui-input-text that holds all styles.
To remove border, you need to remove it from .ui-input-text not input itself as it's invisible.
.ui-input-text {
border: none;
}
To remove inner shadow, you have to do it in JS. Wrap your code in pagecreate to take effect once per page.
$(document).on("pagecreate", function () {
$(".ui-input-text").removeClass("ui-shadow-inset");
});
Demo
Note: As of https://github.com/jquery/jquery-mobile/issues/7781 the wrapper-class will become deprecated.
At the moment I'm using JS like
$("input").closest(".ui-input-text").addClass("no-glow");
Related
I have this textarea with a button, I want the border color to change when I click on the button, how can I achieve this?
As gil mentioned, you're probably looking for NgClass (since you mentioned css specifically in the tags). You can also do this with attribute binding. Here's an example that shows how you might do either:
// In your component
emphasize = false;
toggleEmphasize() {
this.emphasize = !this.emphasize;
}
/* In your styles */
.emphasize {
border: solid 1px red;
}
<!-- And finally your template -->
<button (click)="toggleEmphasize()">Click Me</button>
<!-- Using ngClass -->
<textarea [ngClass]="{ emphasize: emphasize }"></textarea>
<!-- Using attribute binding -->
<textarea [class.emphasize]="emphasize"></textarea>
Here's a stackblitz that provides a working example.
I have a Angular project with .Net core and I'm using Clarity as well, I was wondering if there is a way to change the color of a Clarity toggle switch?
my code that I've tried so far which was not working:
<input type="checkbox" formControlName="validateAll" Color="red" clrToggle />
<input type="checkbox" formControlName="validateAll" style="background-color:red" clrToggle />
<input type="checkbox" formControlName="validateAll" style="color:red" clrToggle />
Add a custom class to the wrapping div, change the styles to the input as it's said in the documentation
The toggle switch is created by using ::before and ::after on the label tag. So if you name your wrapper class for the div custom-styles then your css should look like this:
.custom-styles input[type=checkbox]+label::before {
border-color: blue;
background-color: blue;
}
and for checked
.custom-styles input[type=checkbox]:checked+label::before {
border-color: red;
background-color: red;
}
I have a form where if someone checks a specific input, I want it to show a div. The problem is that the input does not share the same parent as the subsequent div (and can't, for framework reasons). So for example:
<div>
<input id="test" type="radio">
</div>
<div id="ShowIfTestIsChecked">
<!--content to show if test input is checked-->
</div>
This CSS almost works, but is broken by the fact that the div I want to show is not inside the parent of the input:
#test ~ #ShowIfTestIsChecked{
display:none;
}
#test:checked ~ #ShowIfTestIsChecked{
display:block;
}
Is there some other CSS trick I can use here to make this work? This is easy to do with javascript, but I'd like a CSS only way to do it.
Doing this in css would require being able to select the parents div and then the next div which isn't possible in css, You can only select the next or children elements in a css selector.
Why do you want to wrap the input in a div in the first place?
Gimme a sec I'll post an update with css trick that works they way you want but requires changing the first div element into a form element.
So you have to chance the html or us js.
For html you've got 2 options , put the content of each div together or use a form element:
<form>
<input id="trick" type="radio" name="trick" required />
</form>
<div id="ShowIfTestIsChecked">
Hello world
</div>
#ShowIfTestIsChecked {
display: none;
}
form:valid ~ #ShowIfTestIsChecked {
display: block;
}
Just put your checkbox and div together:
<input id="test" type="radio">
<div id="ShowIfTestIsChecked"></div>
#test:checked ~ #ShowIfTestIsChecked {
display: block;
}
There's no other CSS-way.
as the tittle says, is it possible to style a <input type="file"> to only show text like "Upload" without the button and the target file showing :)
i've tryed to google but all the answer doesnt cut it, the only answer that came close to what i wanted was done with javascript div trigger that would trigger.(click) on the input <input type="file"> but as it was pointed out that browser/mobile phones would take this as a "attack" and wouldn't allow the $_POST!
Check this CustomInputFile use Bootstrap its more easy to customize.
You can do this by mocking the input element and binding an event listener to a div or whatever you would like to use like this:
HTML:
<form>
<input type="file" id="upload"/>
<div id="button">Upload</div>
</form>
CSS:
#upload{
display: none;
}
#button{
display: inline-block;
cursor: pointer;
}
JavaScript:
document.getElementById("button").addEventListener("click", function(){
document.getElementById("upload").click();
});
JSFiddle:
http://jsfiddle.net/12Lp66p2/
The calendar dropdown in DatePicker is taking the font size of the document rather than the div inside which the DatePicker resides. How do we fix this?
We don't want to apply the font size manually on the Calendar, because our solution is customizable and we want to allow other widgets with dropdowns as well and so we cannot forsee all dropdowns that might be shown.
#datepickerParent
{
font-size:100px;
}
body
{
font-size:15px;
}
<div id="datepickerParent">
<input type="text" id="datepicker" />
</div>
<input type="text" id="dateInput" />
$(function () {
$("#datepicker").datepicker();
$("#dateInput").datepicker();
})
the calendar always takes 15px as its font-size.
Here is the jsfiddle
Apply style to the ui-datepicker class or ui-widget class
.ui-datepicker{
font-size:10px;
}
Fiddle Demo
I think you can use the following code:
.ui-state-default
{
font-size:10px !important;
}