How to remove default border of button in jquery mobile?
I declare the <a> tag as a button, with custom background images as below:
<a id="btnLogin" href="../main/mainx.html" data-role="button" data-corner="false"> Login</a>
<a id="btnSignUp" href="../singup/signup.html" data-role="button" data-corner="false"> Sign Up</a>
CSS:
a{
width: 265px;
height: 38px;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
border: 0px;
border-color: transparent;
display: box;
text-transform: none;
text-shadow: none;
}
#loginPage a .ui-btn-inner{
padding-top: 11px;
}
#loginPage #btnLogin{
background: transparent url(../../res/img/login_btn.png) no-repeat;
background-size: 100% 100%;
color: #FFF;
}
#loginPage #btnLogin:hover{
background: transparent url(../../res/img/login_btn_over.png) no-repeat;
background-size: 100% 100%;
}
#loginPage #btnSignUp{
background: transparent url(../../res/img/signup_btn.png) no-repeat;
background-size: 100% 100%;
color: grey;
}
#loginPage #btnSignUp:hover{
background: transparent url(../../res/img/signup_btn_over.png) no-repeat;
background-size: 100% 100%;
color: #fff;
}
The button shows within blur border like this:
Please help me.
I think that you're looking for the outline property :
a {
outline:0;
}
To override default styles for buttons in jQuery Mobile, do your modifications on class .ui-btn followed by !important for each property.
Demo: http://fiddle.jshell.net/Palestinian/8TH5d/
.ui-btn { border: none !important; }
As for the shadow, add this attribute data-shadow="false" to <a> tag.
Changing to use button element, everything works fine.
<button id="btnLogin" href="../main/mainx.html" data-role="none" data-corner="false"> Login</button>
<button id="btnSignUp" href="../singup/signup.html" data-role="none" data-corner="false"> Sign Up</button>`
Can you check the background image of button? it maybe contain border inside
IMO best way to have back buttons is to do this
$(document).on("mobileinit", function () {
$.mobile.toolbar.prototype.options.addBackBtn = true;
$.fn.buttonMarkup.defaults.corners = false;
});
However, $.fn.buttonMarkup.defaults.corners = false; doesnt remove round corners for back buttons that are automatically generated using the global options.
This solution worked fine for me
border: none !important;
box-shadow: none !important;
outline: 0;
Related
I created a button using the help of https://www.css3buttongenerator.com. I'm now trying to resize the button on my html so that the icon on the button fits on it perfectly. I want both of them to be the same size so to say. but that webpage is not really helping me.
This is what my code looks like.
HTML:
<button class="butn"><i class="fa fa-question-circle-o" id="AnzeigeerstellenHilfe"></i></button>
CSS:
.butn {
color: #859f38;
background-color:transparent;
background-size: 30px !important;
width: 22px !important;
height: 22px !important;
text-decoration: none;
border: none;
outline: 0 !important;
}
I've been playing with the values on the .css and changing/adding stuff, but no success so far . How can I do it?
use
#icon {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
try:
<button class="butn"><i class="fa fa-question-circle-o" id="AnzeigeerstellenHilfe"></i></button>
.butn {
color: #859f38;
background-color:transparent;
text-decoration: none;
border: none;
outline: 0 !important;
}
or use #sao 's answer if you want to resize the icon
my problem seems to be quite simple. I want to create the button which is png and has hover via .png also. I need this for email campaigns becouse Outlook doesn't understand some css attributes.
I tried make it simple
.button {
border: none;
background: url(/image1.png);
}
.button:hover {
border: none;
background: url(/image2.png);
}
And everything is just white. Any help will be great :)
according to documentation, you should do it like that,
background: url("/image1.png");
.button {
width: 50px;
height: 50px;
border: none;
background: url("https://i.stack.imgur.com/teLso.jpg?s=48&g=1");
}
.button:hover {
border: none;
background: url("https://graph.facebook.com/160520007817300/picture?type=large");
}
<button class="button"></button>
You have an error, use the simple, or double quotes "" - '', an example:
button{
background: url('https://s-media-cache-ak0.pinimg.com/736x/24/fe/e1/24fee13b4dc475c435984ab0aa1b8ecb.jpg');
background-size: 500px 100px;
background-position: center;
width: 500px;
height: 40px;
}
<button> Example button </button>
Same with any of the other html elements.
I am using the Bootstrap button, and I want that when I click on them the focus border should not come around the icons. The code is like below.
<div class="btn-group">
<button class="btn btn-link"> <img src="../images/icons/User.svg" class="svg"></button>
</div>
Use this style to avoid the focus border on items
button:focus {
outline: none;
}
Use outline:0; or outline:none; to remove the border on focus
Note: Use !important at the end of the rule to override the Bootstrap declarations
button:focus{
outline:0 !important;
}
or
button:focus{
outline:none !important;
}
Try It Once
button:focus{
outline:0px;
}
Also Use
button:focus{
outline:none !important;
}
I have to edit !important then it work fine.
On Bootstrap 4, "shadow-none" class was added that disables the effect.
Using JQuery you can disable the effect by adding the "shadow-none" class to the relevant buttons.
$(".btn-secondary").addClass("shadow-none");
Its either one or several of the following lines.
button {
outline: none !important;
border: none !important;
box-shadow: none !important;
}
I don't think you will need the :focus part at all as the actual bootstrap button is never showing. I don't at least. And maybe try and leave the !important away in case it works without it.
Add following CSS property if none of them works -
box-shadow:none !important;
If you're using Bootstrap 4 add this class to the input or button tag
shadow-none
All previous answers all incorrect:
Please see below for the reason, I also added snippet at the bottom of my answer
/*incorrect*/
button:focus {
outline:none !important;
}
/*correct*/
.btn.btn-link:focus {
outline:none !important;
}
Please Learn more about CSS Selector about "class"
class ===> using .
id ===> using #
CSS Selectors ( Also About "class")
https://www.w3schools.com/css/css_selectors.asp
"class" Names Concatenated Or Separated By a Space
https://stackoverflow.com/questions/16858926/class-names-concatenated-or-separated-by-a-space
Please check below my example which run in snippet:
/*=============Button1===============*/
.button1 {
width: 50px;
height: 45px;
background-color: #c4891b;
background-image: url('http://order.uprintinvitations.com/photothumbs/089634f1-2a24-485e-81e9-192ac6c8de07.png');
image-rendering: -webkit-optimize-contrast;
background-size: 50px;
background-repeat: no-repeat;
border: none;
transition: transform .5s;
}
/*for changing the colong on mouse over*/
.button1:hover {
background-color: yellow;
transform: scale(1.1);
}
/*for removing the outline*/
.button1:focus {
outline: none;
}
/*=============Button1===============*/
.button2 {
width: 50px;
height: 45px;
background-color: #c4891b;
background-image: url('http://order.uprintinvitations.com/photothumbs/089634f1-2a24-485e-81e9-192ac6c8de07.png');
image-rendering: -webkit-optimize-contrast;
background-size: 50px;
background-repeat: no-repeat;
border: none;
transition: transform .5s;
}
/*for changing the colong on mouse over*/
.button2:hover {
background-color: yellow;
transform: scale(1.1);
}
<table border='1'>
<tr>
<td>
Button 1
<br>(onclick
<br>no outline)
</td>
<td>
Button 2
<br>(onclick
<br>outlined)
</td>
</tr>
<tr>
<td>
<button class='button1' id='' name='' value=''></button>
</td>
<td>
<button class='button2' id='' name='' value=''></button>
</td>
</tr>
<table>
<a href='https://github.com/dicka-ks'>My Github -> Dicka</a>
https://github.com/dicka-ks
It will work
.svg:focus {
border: none;
outline: none;
}
When I write in the email box the email, I have no problem and displays perfectly.
But when google chrome decides to autofill, the image on the left is removed.
http://s9.postimg.org/suz3z56f3/Sem_t_tulo.jpg
I've read some topics about hacking that yellow background, which works, but the image continues to disappear.
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset;
}
// html
<input type='email' class='email' placeholder='email'/>
// css
.email{
background-image: url('http://www.letsgocook.net/sites/default/img/email.png');
background-repeat: no-repeat;
padding-left: 35px;
}
http://jsfiddle.net/9AM6X/ > example, but no showing the error because I can't replicate the autofill of chrome in jsfiddle.
Puts the image back using keyframes:
#-webkit-keyframes autofill {
to {
background-image:url(images/your-input-bg-image.svg);
}
}
input:-webkit-autofill {
-webkit-animation-name: autofill;
-webkit-animation-fill-mode: both;
}
Kudos to #Steve for his answer to Removing input background colour for Chrome autocomplete?
I'm posting a solution here, essentially as a hack / workaround for the problem described.
Using extra elements we can place the icon on the input element.
Preview: http://output.jsbin.com/necigedago
Working Example:
CSS
.control {
position: relative;
}
.email {
padding-left: 35px;
padding-top: 10px;
padding-bottom: 10px;
font-size: 16px;
}
.email ~ .input-icon {
background-image: url('http://www.letsgocook.net/sites/default/img/email.png');
background-repeat: no-repeat;
background-size: 100%;
background-position: center center;
width: 22px;
height: 14px;
position: absolute;
left: 8px;
bottom: 0;
top: 0;
margin: auto;
}
HTML
<p class='control'>
<input type='email' class='email' placeholder='email'/>
<span class='input-icon'></span>
</p>
It is very inconvenient practice to use background images for textboxes. you can change your HTML markup
html
<div class='icon'></div>
<input type='email' class='email' placeholder='email'/>
css
.email {
border:1px solid black;
padding-left: 5px;
float:left;
border-left:none;
outline:none ;
margin-left:-3px
}
.icon {
background-image: url('http://www.letsgocook.net/sites/default/img/email.png');
background-repeat: no-repeat;
background-position:center center ;
float:left;
width:30px;
height:18px;
margin-top:2px;
border:1px solid black;
border-right:none
}
I have updated the code: jsFiddle
Only option is to remove the padding where the background image would have been in webkit but you can style as such:
/* CHROME ISSUE W/ YELLOW BG */
input:-webkit-autofill#username,
input:-webkit-autofill#usernameId_new,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-text-fill-color: #646464 !important;
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
-webkit-padding-start: 8px !important;
}
The image will still work for IE, FF, etc... but for chrome will overide.
Best-
Use animate to solve this matter is the most useful way!
kudos to #wkille for his answer: https://stackoverflow.com/a/51874418/11720087
You can set a animation like this:
#keyframes clearAutofill {
to { background: 'Your-code'; }
/* e.g background: url('./img/example.png') 0 0 no-repeat #fff; */
}
input:-webkit-autofill {
animation: clearAutofill forwards;
/* 'animation-fill-mode: forwards' can keep the style you set. */
}
I found a better solution to this.
For new Chrome versions, you can just put autocomplete="new-password" in your password field and that's it. I've checked it, works fine.
You just need to add autocomplete="off" to your input field and this will solved the issue. I tried it and it works.
I found another solution which should solve the problem using JavaScript. Add the onchange to your input element, and use following function. I'm using this along with the CSS rules input:focus:invalid and input:required:valid to show different background images based on if the input is valid or not valid.
Works in Chrome and Firefox, but not for Safari it seems :(
CSS:
input:required:valid {
background: url("IMAGE_PATH_HERE") no-repeat right;
background-size: 25px;
border: 3px solid green;
}
input:focus:invalid {
background: url("IMAGE_PATH_HERE") no-repeat right;
background-size: 25px;
border: 3px solid red;
}
HTML:
<input type="text" name="name" id="name" autocomplete="name" onchange="fixAuto(this)" required>
JavaScript:
/**
* Adds background image to input fields if they are removed by the browser.
*
* #param element An input HTML element.
*/
function fixAuto(element) {
setTimeout(() => {
// Store the current value of the input field
let value = element.value;
// Store the element itself
let input = document.getElementById(element.id);
// Change the input fields value
input.value = value;
}, 0);
}
I have got a little problem with setting a background image for <button>.
Here is the html I have got on site:
<button id="rock" onClick="choose(1)">Rock</button>
And here is the CSS:
button {
font-size: 18px;
border: 2px solid #AD235E;
border-radius: 100px;
width: 150px;
height: 150px;
}
button #rock {
background: url(img/rock.png) no-repeat;
}
I don't know why the button's background is still white.
Astonishing that no answer addresses or mentions the actual problem here.
The CSS selector button #rock says "give me an element with the id rock inside a <button> element", like this:
<button>
<span id="rock">This element is going to be affected.</span>
</button>
But what you wanted is a <button> element with the id rock. And the selector for that would be button#rock (note the missing space between button and #rock).
And as #Greg already mentioned: #rock is already specific enough to target the button and could be used on its own.
For some odd reason, the width and height of the button have been reset. You need to specify them in the ID selector as well:
#rock {
width: 150px;
height: 150px;
background-image: url(http://th07.deviantart.net/fs70/150/i/2013/012/c/6/rock_01_png___by_alzstock-d5r84up.png);
background-repeat: no-repeat;
}
Live test case.
You need to call CLASS in button
<button class="tim" id="rock" onClick="choose(1)">Rock</button>
<style>
.tim{
font-size: 18px;
border: 2px solid #AD235E;
border-radius: 100px;
width: 150px;
height: 150px; background-image: url(images/Sun.jpg);
}
</style>
Replace
button #rock
With
#rock
No need for additional selector scope. You're using an id which is as specific as you can be.
JsBin example: http://jsbin.com/idobar/1/edit
Delete "button" before # rock:
button #rock {
background: url(img/rock.png) no-repeat;
}
Worked for me in Google Chrome.
Try changing your CSS to this
button #rock {
background: url('img/rock.png') no-repeat;
}
...provided that the image is in that place
To get rid of the white color you have to set the background-color to transparent:
button {
font-size: 18px;
border: 2px solid #AD235E;
border-radius: 100px;
width: 150px;
height: 150px;
background-color: transparent; /* like this */
}
You absolutely need a button tag element?
because you can use instead an input type="button" element.
Then just link this CSS:
input[type="button"]{
width:150px;
height:150px;
/*just this*/ background-image: url(https://images.freeimages.com/images/large-previews/48d/marguerite-1372118.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: 150px 150px;
}
<input type="button"/>
try this way
<button>
<img height="100%" src="images/s.png"/>
</button>