How can I prevent browsers from customizing buttons, such as Chrome, for example, does.
I would like to remove that "No f... sen". What is the best way to do that?
The only way you can remove the text part in non-IE10+ browsers to make it transparent:
input[type=file] { color: transparent; }
However, I’d not recommend that, as you will also not be able to see the text when a file has been selected either.
For IE10, you can style it with:
input[type=file]::-ms-value { /* styles here */ }
In WebKit you can style the button itself with:
input[type=file]::-webkit-file-upload-button { /* styles here */ }
While in IE10 you can do the same with:
input[type=file]::-ms-browse { /* styles here */ }
Try to google for "Css style file input" ;)
This will lead to: http://www.quirksmode.org/dom/inputfile.html
Styling of <input type="file" /> is really tricky.
Related
One has a ConvertKit form, that was added using ConvertKit plugin, and uploaded on a widget as follows
After applying some styles, when I am logged in, the form looks like this
However, when I log out, there are some default styles being loaded and the form ends up looking like this
How does one remove ConvertKit default stylings?
There may be different ways of removing the default styles applied by ConvertKit. I have tried the following, but with no success:
Inspecting the form in the front-end, one sees that inside a form with the class "seva-form formkit-form", apart from two div, one has a style element., as follows
<form class="seva-form formkit-form">
<div class="formkit-background">...</div>
<div data-style="minimal">...</div>
<style>...</style>
As I have seen that removing the style block <div data-style="minimal">...</div> solves the issue with the form, tried, as per #m4n0's suggestion applying .formkit-form div[data=style="minimal"] { display: none; }, but it didn't solve the problem.
Based on your changing requirements that we discussed through comments:
form.formkit-form[data-uid="3624b8b144"] {
border: transparent;
margin: 0 auto; /* To center the form, you can also use flexbox centering */
}
/* I had to increase the specificity of the below selector because there are other selectors acting on it */
form.formkit-form div.formkit-powered-by-convertkit-container a.formkit-powered-by-convertkit {
display: none; /* To hide the copyright but check how their licensing works */
}
.formkit-guarantee a {
color: #fff; /* To change the color of privacy link */
}
Output:
I have a water mark text in my #Html.TextBoxFor(). I want to customize it by changing the watermark text to a fade colour and to hide the watermark text on clicking the textbox.
Here is my code-
#Html.TextBoxFor(model => model.Code, new { maxlength = 5, #placeholder="watermark" })
since bookmarks aren't supported by all the browsers you should use some javascript to give users the same watermark feel even if they aren't using a browser that supports it.
if you are using jQuery then give this one a try https://code.google.com/p/jquery-watermark/
For this purpose you must conside JQuery Placeholder plugin, with this plugin you must only define a placeholder attribute exactly like your example.
The plugin and several examples can be found here.
Although new browsers support placeholder text, Their behavior on focus are different. I personally think that is perfectly acceptable they are different browsers after all.
We can certainly style the placeholder text by using these CSS properties
CSS
::-webkit-input-placeholder {
color: red;
}
:-moz-placeholder { /* Firefox 18- */
color: red;
}
::-moz-placeholder { /* Firefox 19+ */
color: red;
}
:-ms-input-placeholder {
color: red;
}
If you want a JavaScript based solution, instead using a plugin, this can be easily done yourself, even without the need for jQuery.
JS Example
<input type="text" value="Watermark" onfocus="if (this.value == 'Watermark') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Watermark';}">
I have a Submit Button like this:
<input type="submit" data-corners="false" id="code_check_button" tabindex="5" data-rel="external" value="GO">
which - with a custom css theme - outputs this: http://sht.tl/59y3m
Now I would like to use the id (#code_check_button) to style the button with more specificity.
Unfortunately jquerymobile automagically transforms the input type submit in a snippet of code I cannot control: http://sht.tl/cQq
As you can note, the original button ID is useless...
Can you tell me how may I custom style that button (of course, without wrapping it in an extra tag...)?
Thank you!
Numerous ways this can be achieved..
Here are a few examples:
submit {
styles:styles;
}
Not the most compatible in older browsers:
input[type="submit"] {
styles:styles;
}
Then you can target the ID:
#code_check_button {
styles:styles;
}
In your stylesheet add the ID #code_check_button and provide the desired style you want.. see example below :-
#code_check_button {
your desired style properties here...
}
EDIT:
You can use the class of the generated div and style the button accordingly. In this generated snippet you have two elements to style. please find below :-
.ui-btn {
style properties here...
}
.ui-btn .ui-btn-text {
style properties here...
}
CSS
#code_check_button {
color:#000 !important;
width:200px !important;
}
You can see I have added !important tag in all the css properties. This is because of overwritten the jQ mobile default styles.
If something keeps changing your intended css into useless code, this may be a situation where you would resort to simple text (eg. nano for mac or notepad for windows) Web design programs are double edged swords, most of the time the bells and whistles on these programs help make things easier, but sometimes they can make things more complicated. To custom style a button all you have to do is put your id or class selector name in the input tag and then enter the css for it. For example
CSS
#code_check_button { background-image: url(/*desired image url*/);
background-color: /*desired background color*/;
color: /*desired font color*/; }
HTML
<input id="code_check_button" type="submit" name="submit">
Just try it in notepad this time.
Is there a way that I can select a textarea such that $('#id_of_textarea').val() in jQuery will be ''? I tried using :empty. I saw that CSS provides a way to select empty inputs because the text is in the value attribute ([value=""]). Is there an attribute for the text in a textarea?
I'm looking for a selector that will work with CSS, not just jQuery.
Best solution I can think of is a CSS 3 workaround. Set the field to required (and unset it on submit if need be). Then you can use
textarea:invalid { /* style here... probably want to remove box-shadow and such */ }
this works in recent browsers except edge (at the moment):
textarea:placeholder-shown {
/* this should be active only when area is empty and placeholder shown */
}
so with jQuery for example you can pick all empty textareas:
$('textarea:placeholder-shown').val()
https://developer.mozilla.org/en/docs/Web/CSS/:placeholder-shown
If you're using React, then this is the solution:
textarea:not(:empty) {
// Apply css here
}
For instance,
/* Apply style when textarea contains text */
textarea:not(:empty) {
border: 6px solid blue;
padding: 6px;
}
Working demo:
Textarea - Select empty textarea using CSS
Note: While this works perfectly in React (because of re-painting caused by state update), It does not provide the same response if implemented using Vanilla HTML + CSS.
This works fine, as with input:
<textarea name="comment" id="comment" class="authority_body-input" data-val="{$form.comment}" onkeyup="this.setAttribute('data-val', this.value);">
textarea.authority_body-input:not([data-val=""]):not(:focus) {
color: red;
}
You can use the :empty css pseudo-class.
See an example in jsfiddle.
In the example there is a button for dynamically add new empty textareas to the DOM, so you can see that the new elements also are affected with the pseudo-class.
The code in the example was tested in Firefox 5.0, Opera 11.50 and Chromium 12.
Also, you can see a good description for the :empty pseudo-class here.
For those who are using AngularJS, you can use ng-class in your view to add a class to your textarea to know if it is empty or not.
HTML :
<textarea ng-model="myForm.myTextArea"
ng-class="(myForm.myTextArea.length)?'not_empty':'empty'">
</textarea>
CSS :
textarea.empty {
background-color:red;
}
textarea.not_empty {
background-color:blue;
}
Here is a jsfiddle.
I have a jQuery UI Button that I am trying to style using CSS. Basically all I want is a dark-green background, and a light-green hover color. I noticed that for whatever reason, specifying the desired styles in my CSS file didn't work, so I added some code to apply them programmatically when the button is created:
//initialize the jQuery button with the correct styles
$( "button", ".buttonContainer" ).button();
//add a class that we can apply our styles to (jQuery likes to override styles applied to .ui-button)
$(".buttonContainer .ui-button").addClass("greenButton");
//override button styles (doesn't work when done through stylesheet)
$(".greenButton").css("background", "none !important");
$(".greenButton").css("background-color", "#006600 !important");
$(".greenButton").css("border", "1px solid darkGray !important");
//mouseover handler to change the background color (same reason as above)
$(".greenButton").hover(function() {
//mouse-over handler
$(this).css("background-color", "green !important");
}, function() {
//mouse-out handler
$(this).css("background-color", "#006600 !important");
});
This works fine in Chrome, IE, and Safari, but for some reason Firefox continues showing the default gray button styles (no scripting errors are reported). Interestingly, if I open the web-developer CSS editor, the button gets the correct styles instantly. I have the following in my CSS from back before I realized that the styles would only take if applied programmatically:
.greenButton {
background-color: #006600 ! important;
}
.greenButton:hover {
background-color: green ! important;
}
Anyways, what I see in Firefox by default looks like this:
...when it should look like this (as seen in any other browser):
Any ideas?
In your CSS you are only setting the background-color attribute, while jQuery UI buttons are built with background image, which covers the color. You were correct to set 'background:none' via JS, but adding it to the element's style multiple times via css() messes things up a bit - just inspect the style attribute of your button when active in, e.g. FireBug. It might well be that you hit a minor bug in FireFox. It works for me. In any case, here is working jsFiddle
CSS:
.greenButton {
background: #006600 none ! important;
}
.greenButtonHover {
background: #009900 none ! important;
}
HTML:
<button>Should be green on hover</button>
JS:
$("button").button();
$("button").addClass("greenButton");
$(".greenButton").hover(function() {
$(this).addClass('greenButtonHover');
}, function() {
$(this).removeClass('greenButtonHover');
});