Is it possible that when I move on the button mouse, change button styles?
When the cursor on the button, show this style:
input.button_p
{
color: #000000;
border-style: none;
}
When the cursor no't on the button, show this style:
input.button_a
{
color: #FFFFFF;
border-style:solid;
}
Thanks
You can use the :hover pseudo class, like this:
input.button_p {
color: #000000;
border-style: none;
}
input.button_p:hover {
color: #FFFFFF;
border-style:solid;
}
And the element just has the button_p class, like this:
<input type="button" class="button_p" />
input.button {
color: #000000;
border-style: none;
}
input.button:hover {
color: #FFFFFF;
border-style:solid;
}
Note that the :hover attribute in this usage isn't support by all of the browsers.. But it is supported in enough of them to not worry about it.
<input type="submit"> and <input type="button"> are not styleable on all browsers. You should be using <button type="submit">text</button> instead.
Related
Hi I am trying to write css classes as per the specification given. For example, If i am designing a button they have given specification as below.
Normal:-
Hover:-
Below is my html code which displays button.
<input type="button" class="btn" value="Button"/>
I want to write classes for the above button as per the specification provided. May i know how to write this? I have tried something below but correct me if i am wrong.
.btn {
background: rgb(12,116,218);
border: rgb(12,116,218);
border-bottom: rgb(0,76,151);
}
Also how can I write css for the hover as per the above specification provided? Any help would be appreciated. Thank you
Create another rule with :hover selector
.btn {
background: rgb(12,116,218);
border: rgb(12,116,218);
border-bottom: rgb(0,76,151);
}
.btn:hover {
background: rgb(46,146,250);
}
<input type="button" class="btn" value="Button"/>
Use CSS pseudo-selectors, also you can combine styles for multiple selectors (separated by coma)
/* styles for the element */
.btn {
background: rgb(12,116,218);
border: 1px solid #0C74Da;
border-bottom: rgb(0,76,151);
}
/* styling when on hover */
.btn:hover {
background: rgb(46,146,250);
border: 1px solid #2E92FA;
}
/* styles for both cases */
.btn, .btn:hover{
font-size: 13px;
color: white;
}
<input type="button" class="btn" value="Button"/>
You can write css as per below:
.btn {
background: rgb(12,116,218);
border: rgb(12,116,218);
border-bottom: rgb(0,76,151);
}
.btn:hover{
background: rgb(255,0,0);
}
.btn:active {
background-color: yellow;
}
.btn:visited {
color: black;
}
<input type="button" class="btn" value="Button"/>
For better documentation check this
I'm trying to set a custom color for the active state of a bootstrap button.
HTML:
<button class="btn btn-lg btn-primary" id="addToCart" data-value={{food.name}}>Add to cart</button>
CSS:
.btn-primary {
color: #FFFFFF;
background-color: #43A047;
border-color: #43A047;
}
.btn-primary:active,
.btn-primary.active {
background-color: #43A047;
}
.btn-primary:hover {
color: #43a047;
background-color: #FFFFFF;
border-color: #43a047;
}
With this code I'm able to change the color and the hover color of the button, but when I click the button the default btn-primary color remains. What am I doing wrong here?
Twitter's Bootstrap provides a Button Generator, take a look into the generator, maybe you can change the generated CSS code to change to meet with your requirements:
http://twitterbootstrap3buttons.w3masters.nl/
Try something like this.
.btn.btn-primary {
color: #FFFFFF;
background-color: #43A047;
border-color: #43A047;
}
.btn.btn-primary:hover {
color: #43a047;
background-color: #FFFFFF;
border-color: #43a047;
}
.btn.btn-primary:focus {
background-color: #f00;
}
All,
I have a checkbox that I applied the following CSS style to:
-webkit-appearance: none;
This same code is on some text fields I have and these still continue to work just fine. Why is this functionality causing the checkbox to not allowed to be checked?
I like the styling of the checkbox this way but still need the functionality to work. If I change the code to:
-webkit-appearance: checkbox;
It displays the standard checkbox. Any ideas? Here is a demonstration:
/* http://jsfiddle.net/VWC76/ */
input[type='checkbox'] {
height: 20px;
border: 1px solid #B5B7B8;
font: 14px/26px 'pt-sans', 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif;
padding: 7px 7px 7px 12px;
/*margin:0 0 30px 0;*/
background: #FFF;
border: 1px solid #d5d5d6;
outline: none;
color: #96999D;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-webkit-appearance: none;
-webkit-font-smoothing: antialiased;
border-radius: 4px;
transition: all 0.15s;
}
input[type=checkbox]:focus {
border-color: #ACACB8;
color: #2E3236;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18)!important;
}
div {
border: 1px inset #ccc;
border-radius: 7px;
margin: 1em;
padding: 1em;
}
#webkitCheckbox {
-webkit-appearance: checkbox;
}
<div>
<label>
<input type="checkbox" />
<span>This has <code>-webkit-appearance: none;</code></span>
</label>
</div>
<div>
<label>
<input type="checkbox" id="webkitCheckbox" />
<span>This has <code>-webkit-appearance: checkbox;</code></span>
</label>
</div>
You just nuked all styles of checkbox on WebKit, so yes you can't see whether they're checked or not (they still are, it just isn't visible to us sighted people without a screen reader).
You need to style the checked state with the :checked pseudo: http://jsfiddle.net/VWC76/450/
input[type=checkbox]:checked {
background-color: red;
/* or whatever styles you want depending on your design */
/* be as obvious as possible that it's a checkbox and that it's checked! */
}
EDIT:
appearance:none now exists outside of WebKit/Blink (caniuse). Just use Autoprefixer if you've better to do than adding prefixes by hand :)
A good implementation: accessible custom checkbox and radio form controls
EDIT 2:
in the fiddle demo, adding focusable elements before and after checkbox to show it works with keyboard (just click on the first occurence of "Test" and then tab tab space tab). It lacks any visual cue that checkbox/label is focused which is a bad thing (it's a demo). Best seen on Chrome which is a worse thing :p (you need Autoprefixer. Try on Codepen)
You need to add a input[type=checkbox]:checked
input[type=checkbox]:checked {
background: #BADA55;
}
If this is what you're looking for?
Disabling the appearance removes the checked appearance too. You also need to add styles to define how the checkbox will appear when checked.
input[type='checkbox']:checked
{
position:relative;
}
input[type='checkbox']:checked:before
{
content:'';
display:block;
width:17px;
height:16px;
position:absolute;
top:1px;
left:1px;
background:none #ACACB8;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
opacity:0.5;
}
Check out the fiddle below for an example:
http://jsfiddle.net/8n8hM/
The best way to personnalize checkbox or radio button that works cross browser is by using label that you set for your checkbox.
In your css, you hide your checkbox and you add any style you want for the label.
input[type='checkbox'] {
outline: 0;
user-select: none;
display: inline-block;
position: absolute;
opacity: 0;
}
input[type='checkbox'] + label {
display:inline-block;
width:20px;
height:20px;
background-color:blue
}
input[type='checkbox']:checked + label {
background-color:red
}
<input id="myChk" type="checkbox" />
<label for="myChk"> </label>
See this jsfiddle.
I'm trying to change the style of a button with an embedded image as seen in the following Fiddle:
http://jsfiddle.net/krishnathota/xzBaZ/1/
In the example there are no images, I'm afraid.
I'm trying to:
Change the background-color of the button when it is disabled
Change the image in the button when it is disabled
Disable the hover effect when disabled
When you click on the image in the button and drag it, the image can be seen separately; I want to avoid that
The text on the button can be selected. I want to avoid that, too.
I tried doing in button[disabled]. But some effects could not be disabled. like
top: 1px; position: relative; and image.
For the disabled buttons you can use the :disabled pseudo class. It works for all the elements that have a disabled API (typically form elements).
For browsers/devices supporting CSS2 only, you can use the [disabled] selector.
As with the image, don't put an image in the button. Use CSS background-image with background-position and background-repeat. That way, the image dragging will not occur.
Selection problem: here is a link to the specific question:
How to disable text selection highlighting
Example for the disabled selector:
button {
border: 1px solid #0066cc;
background-color: #0099cc;
color: #ffffff;
padding: 5px 10px;
}
button:hover {
border: 1px solid #0099cc;
background-color: #00aacc;
color: #ffffff;
padding: 5px 10px;
}
button:disabled,
button[disabled]{
border: 1px solid #999999;
background-color: #cccccc;
color: #666666;
}
div {
padding: 5px 10px;
}
<div>
<button> This is a working button </button>
</div>
<div>
<button disabled> This is a disabled button </button>
</div>
I think you should be able to select a disabled button using the following:
button[disabled=disabled], button:disabled {
// your css rules
}
Add the below code in your page. No changes made to button events, to disable/enable the button simply add/remove the button class in JavaScript.
Method 1
<asp Button ID="btnSave" CssClass="disabledContent" runat="server" />
<style type="text/css">
.disabledContent
{
cursor: not-allowed;
background-color: rgb(229, 229, 229) !important;
}
.disabledContent > *
{
pointer-events:none;
}
</style>
Method 2
<asp Button ID="btnSubmit" CssClass="btn-disable" runat="server" />
<style type="text/css">
.btn-disable
{
cursor: not-allowed;
pointer-events: none;
/*Button disabled - CSS color class*/
color: #c0c0c0;
background-color: #ffffff;
}
</style>
By CSS:
.disable{
cursor: not-allowed;
pointer-events: none;
}
Them you can add any decoration to that button.
For change the status you can use jquery
$("#id").toggleClass('disable');
To apply grey button CSS for a disabled button.
button[disabled]:active, button[disabled],
input[type="button"][disabled]:active,
input[type="button"][disabled],
input[type="submit"][disabled]:active,
input[type="submit"][disabled] ,
button[disabled]:hover,
input[type="button"][disabled]:hover,
input[type="submit"][disabled]:hover
{
border: 2px outset ButtonFace;
color: GrayText;
cursor: inherit;
background-color: #ddd;
background: #ddd;
}
consider the following solution
.disable-button{
pointer-events: none;
background-color: #edf1f2;
}
For all of us using bootstrap, you can change the style by adding the "disabled" class and using the following:
HTML
<button type="button"class="btn disabled">Text</button>
CSS
.btn:disabled,
.btn.disabled{
color:#fff;
border-color: #a0a0a0;
background-color: #a0a0a0;
}
.btn:disabled:hover,
.btn:disabled:focus,
.btn.disabled:hover,
.btn.disabled:focus {
color:#fff;
border-color: #a0a0a0;
background-color: #a0a0a0;
}
Remember that adding the "disabled" class doesn't necessarily disable the button, for example in a submit form. To disable its behaviour use the disabled property:
<button type="button"class="btn disabled" disabled="disabled">Text</button>
A working fiddle with some examples is available here.
When your button is disabled it directly sets the opacity. So first of all we have to set its opacity as
.v-button{
opacity:1;
}
Need to apply css as belows:
button:disabled,button[disabled]{
background-color: #cccccc;
cursor:not-allowed !important;
}
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
{
// apply css here what u like it will definitely work...
}
And if you change your style (.css) file to SASS (.scss) use:
button {
background-color: #007700;
&:disabled {
background-color: #cccccc;
}
}
In Opera when a text field is focused, the submit button gets an ugly black border.
You can see this in a screenshot.
In the bottom of the image the textarea is focused and submit button looks awful. How can I prevent this using CSS?
UPDATE: the CSS for the button is
.uiGreenButtonOuter {
border: 1px solid #234723;
cursor: pointer;
}
.uiGreenButtonInner {
margin: 0;
font-size: 11px;
display: block;
background: #3E7E3E;
padding: 4px 6px;
border-width: 1px;
border-style: solid;
border-color: #6AB76B #3A763B #3A763B;
color: white;
text-align: center;
text-shadow: 0 1px 0 #234723;
cursor: pointer;
}
.uiGreenButtonOuter:hover .uiGreenButtonInner {
text-decoration: none;
background: #4C9B4C;
}
.uiGreenButtonInner:focus{
outline: 0;
}
This will do the job:
input[type="submit"] {
border: 0;
}
if your html is set like this:
<form action="">
<textarea name="fos"></textarea>
<span class="uiGreenButtonOuter">
<input class="uiGreenButtonInner" type="submit" name="send" value="Nyedva" />
</span>
</form>
Here is demo
you can use :focus or :blur pseudo-classes to do the trick. We need the code to understand the exact problem.
eg.
textarea:focus {/* your css here */}