I need to create a web application to run on Blackberry browser. The issue i am facing is:
There are a few text boxes on various pages which are given a CSS class. I needed to use border property to give them all- 1px solid Black. But on incorporation of this border property for Blackberry, there is an open issue. Once i tap on the edit field, the Blackberry browser is somehow filling the text box with blue background. Note that such behaviour is not seen on iPhone and Android. It seems that Blackberry browser is using its default behaviour. Is there any way to stop the automatic behavior of Blackberry browser such as some css property or javascript or meta tag? Has anyone else faced similar problem?
On More research into this, i found that the border is not actually making the background as blue. But, as soon as we include border property, it highlights that element with its default blue color. (Likewise, it does in case of taps on images). I tied using -webkit-tap-highlight-color property to disable it. But, it works on iPhone but not on Blackberry.
More research lead me to css property "outline:none" Outline property was leading to the highlight of any element. The issue is solved as soon as you do the outline:none
You're better off not overriding the default behaviour of the browser. Blackberry users will likely be accustomed to the blue highlight. It is most probably being added with a :focus CSS pseudo-class. If you stil want to override it, you could add a input:focus { background: #fff; } etc. rule.
Related
As shown in my jsfiddle demo, the button background-color without any styling looks consistent across all browsers - white.
However as soon as border is added, the background-color becomes inconsistent across browsers(I tested on macOS 10.12.6):
white in chrome 62.0.3202.94, which is expected
light grey in FF 57.0, which is slightly unexpected
dark grey in safari 11.0.1, which is highly unexpected
Can someone explain to me why? Is this a bug of safari?
That's because once border is specified, the native appearance of <button> element (the one with operating system's look & feel) is disabled, and a completely new default look & feel would be applied.
Unfortunately, different browsers have different interpretation on what this "new look & feel" should be -- Safari choose to define background of button as "dark grey" for this "new look & feel", it's not a bug.
According to an announcement of WebKit in 2005:
Specifying the background/border will result in the Aqua appearance being disabled and a more platform-neutral look being used.
Thus, border property can be used like a switch -- a switch that can convert button between 2 appearance modes: one is operating system level button which is stereoscopic but hard to customize. Another is platform-neutral, simple but easy to apply CSS.
Actually, this is what Bootstrap did to customize its button styles. In Bootstrap's _buttons.scss source code, the .btn button class has a border property as 1px solid transparent; -- an invisible border which will trigger the platform-neutral mode for further CSS rules.
I am developing a browser based app using AngularJs.
About a week ago, I notice that the cursor had changed to a grey circle. However, I was in the throes of development and just kept coding. Now so much has changed that a diff with a previous version won't help me find the cause, and I can't see anything obvious in the code.
Is thare any sledgehammer way to rest it? I was thinging of setting a CSS style on the <biy> element, but that did no thelp.
I am sure that I am not setting the cursor. Perhaps it is done by some JS library which I use. Is there an easy way to override this?
When you are using the responsive mode of the website/ page, you will get a grey circle in the chrome dev tools. Because, you wont have a cursor for touch screens :)
You could set the following css rule:
html { cursor: auto !important; }
I guess you by 'default' you mean that you want to reset it to where the browser decides which cursor to display in a particular context, this would be auto in this case.
However this can only be a temporary solution and the rule that causes the cursor to be a grey circle should be eliminated. Further reference can be found here Mozilla Developer Network : cursor.
If the grey circle is opaque and you are using chrome with the device toggled to mobile / tablet, then you can't change the cursor - it is just showing you where your finger would be - there is no cursor on a mobile or tablet
I'm implementing a Kendo PanelBar on my webpage. I'm pretty new to CSS/HTML, so I'm lost on how to remove a default style on the PanelBar. When I select a panel, it opens properly and looks fine. When I move the mouse away from the open panel, there is an orange border that appears on the open panel. I have attached two images showing the issue.
Everything looks fine when I hover on the open panel:
When I move the mouse away, there is an orange border:
Can anyone tell me how to remove this border?
I was challenged with the same issue and submitted a ticket to kendo support. Iliana Nikolova supplied the following:
.k-panelbar .k-state-focused.k-state-selected {
box-shadow: none;
}
In my solution, the panelBar box shadow was still showing, I then used page inspector (F12) and tested following rule using the box-shadow:none; property and that did the trick for me.
.k-state-selected > .k-link, .k-panelbar > li > .k-state-selected, .k-panelbar > li.k-state-default > .k-state-selected.k-link {
background-color: #C7D3A9;
color:black;
box-shadow: none;
}
Before your post I was searching the a boat ton of code and getting no place. I used the recommendation of using theme builder and took a video (using windows media encoder 9), I feel by illustrating the problem it helped generate a better kendo response. Iliana didn't return my code with the fix so this left me hanging but he did supply the key element.
If you find this solves the issue please vote answered. Others who also find this helpful please also provide positive feedback.
I am not sure what element it is, because you did not give the exact code.
But you can use a simple css, find the element and apply the css to remove the orange border.
I had the same issue. Use the Kendo Theme Builder here at http://demos.telerik.com/kendo-ui/themebuilder/ and then load the default theme. You should see the themebuilder panel appear in the bottom right corner of your screen. Look for "Widget States" drop down. You will see the options there and you can change the orange border color.
Now if you want to completely remove the orange border and active state, you will need to open up the kendo.default.min.css file and do a CNTRL+F (Find) for the hex color code #f35800. Look at the selectors carefully to make sure you are modifying the correct style (i.e. .k-state-selected)
Then when you are sure you've got the right selector(s), change the color to "transparent" (i.e. border-color:transparent)
This worked for me
What CSS property should I change at this page to disable transparency of a share iframe which appears when Like button is clicked?
When you hover on that Facebook box after clicking Like button, it becomes partially transparent and if you move your cursor away from it, it becomes solid white. I want it to be completely opaque all the time.
Well, I see no transparency on that box, only for the fade-in effect when it opens, but once it's fully opened it's not transparent.
To answer your question, you can see for yourself using firebug (firefox) or the development tools (chrome/safari) which css rules apply to what element.
From what I've seen now, you can use the use these: fb_edge_comment_widget fb_iframe_widget which are the classes of the span containing the iframe, or you can use the iframe itself.
The thing is though, is that you should not hack that. Why? Since then you'll have to always check for updates facebook are making, changes that they do not update you about (API changes they update on the blog), if you fail to be aware of these changes it can "break" your code/style.
I was also having the exact same problem.
I am using an AddThis widget set, and I don't know if this was the case for you or not (it looks like you may have chosen a different solution as I can't see the Like button on your site).
I ended up using
.addthis_button_facebook_like {
opacity:1 !important;
}
but you would use whatever selector that wrapped your like button. if using the standard embed from Facebook, it would probably be
.fb-like {
opacity:1 !important;
}
Someone else was having a similar problem with a Send button, which got me on the right track.
See it working like it ought to here. I'm sure it had something to do with some conflict from other styles, or possibly AddThis, but it's working now!
I am using GWT 2.3 to create a web application. In the web page, I have a button for the submission. I haven't created any css properties for this button. In Google Chrome and Firefox, the size of the button is just the size of the text of the button. However, in IE8, the size is bigger, with some spaces before and after the text of the button. Does any body know how should I do? Since I need to support the internationalization, the texts of the button for different locales are different.
I have tried width:auto; for the button, but it doesn't work.
Thanks in advance!!
Ah, this is an oldie but goodie.
Basically, IE sucks at rendering buttons and you have to add this CSS to fix it:
.my_button {
/* optional */
padding:0 .25em 0 .25em;
/* These two are required */
width:auto;
overflow:visible;
}
See the link above for more information.
In general (not only for GWT), buttons are rendered very differently not only between browsers, but also between operating systems - especially they look completely different on Mac OSX. Take a look at this site, which also has a few nice solutions around the button problem: http://particletree.com/features/rediscovering-the-button-element/
So if you need exact sizes (and maybe a consistent look) across browsers/OS, I think it's better not to use the native button style at all, but to fully customize the style of your buttons. (This is pretty usual on modern web sites, e.g. I don't think there are any native style buttons on stackoverflow.com at all.)
Use Anchor with different background images for it's various states (link, active, hover, visited).