I'm searching for a way to style input after selection an item from autocomplete. Here is an example (Google Chrome):
I have already changed default styles for the input, but it seems like they were overridden after selection from autocomplete.
I'm searching for crossbrowser way to style it.
Thanks in advance
Related
I am using bootstrap-select to add the search function to my selects in my bootstrap project. It works great but what I can't stand about it is that it transforms the select from the default styling and basically applies the 'btn-light' style to it. So it looks completely different than the rest of the inputs and I HATE IT and I can't figure out how to change it.
Does anyone have any ideas? The easiest the best =)
This looks terrible!
Add data-style='' and data-style-base='form-control' to the select element.
Is there a firefox addon or is there a way to use firebug such that you can select some text on the website and it will tell you what styles are being used for that bit of text?
At the moment if I select a bit of text that is styled using css imported from elsewhere I would have to go digging manually to find out what style is being used. Is there an easier way?
Both FireBug and Web Developer addons can be used for this.
Just right click it in Firebug, choose HTML, and in the right pane, select Style>Show User Agent CSS. This will show a list of CSS rules that are being applied on the selected element.
I use the Web Developer Toolbar in FireFox to test CSS-edits. I want to do the same in IE, and I can somewhat do that with IE8's Developer Tool.
However I can't add a style in Developer Tools, only edit existing styles - does any of you guys know of a way to edit the CSS like you can do with Chris Pedericks Web Developer Toolbar?
You can:
add a style attribute (right click the html tag and click add attribute (with the name style, and then edit the style attribute once its added)
Click the CSS tab, right click the empty space, and add a rule (this is like adding a line to your css file)
Adding to what Gabriel mentioned above.
For a quick addition to test and see the effect I do it a bit differently.
With the HTML tab selected choose the "Attributes" panel next to Style, Trace Styes and Layout.
Click the "+" button and begin typing the css style you would like to add. The new style attribute is added automatically in the DOM view panel.
Hope this helps.
I'm on my Mac right now, but I remember running into that.
When looking at the right side of the Developer Tool, you see a list of CSS styles. Above that you see a few 'tabs': Style, Trace Styles, Layout, Attributes. If I remember correctly you can't change them in the style tab. But you can change them in one of the other tabs. You might have to edit them through the style attribute.
You could try firebug lite but it's a little work to get it setup.
Follow following steps:
1. Click on Developers Tool
2. In Html select element for which you want to add css
3. Select attribute tab present on right side
4. Add Name and Value.
Check your style is applied to html element.
i have few listbox widget, and i need to change the color of the arrow that opens the drop down list, and its surrounding box
how can i do it with the CSS?
is there an attribute list for all styles that can be applied on a widget?
Me
The javadoc for GWT specifies what styles you get by default on each of the Widgets:
See ListBox javadoc page, it states that it has the .gwt-ListBox { } style. For this particular style GWT doesn't have any property defined.
Open the css file inside your applications "war" folder and paste .gwt-ListBox { }, then put any CSS property you want to use inside that style, like .gwt-ListBox {
color: red;
}
You should probably notice that ListBox is using a select HTML element (have a look at the generated HTML code), and AFAIK you cannot style the color of the arrow, as it is browser dependent.
If you really need to do that you are going to have to try more complicated things like the ones suggested in here, but this involves doing some javascript hackery.
FWIW, I had a quasi-related problem, which may or may not help you. I needed to be able to set the color of the text in the label of a checkbox programmatically, depending on where the checkbox was in a list of checkboxes and a couple of other factors.
It turned out to be possible to construct the checkbox with some html, roughly like this (sorry, currently away from my code): "new CheckBox(new Html(""));
Hope that helps at all; I don't know for sure that the ListBox enables construction with additional html. And it took a bunch of experimentation to figure out exactly what worked in there. But now it does.
I am using the AJAX Control Toolkit Popup Calendar Control in a datagrid. When it is in the footer it looks fine. When it is in the edit side of the datagrid it is inheriting the style from the datagrid and looks completely different (i.e. too big).
Is there a way to alter the CSS so that it does not inherit the style from the datagrid?
Open the page in firefox. However, first, download the firebug extension. Then, right click on the offending version and go down to inspect element.
Firebug is awesome because it let's you navigate the css of any element. You have two options here:
1) Assign the topmost element an css class and work it that way.
or
If that's not an option, you can use firebug to get the xpath to the offending element.
Xpaths look like body/table/tr/td/table/tr[2]
what you want to do with that in css is
body table tr td table tr {
/*css goes here */
}
Option 1 is definitely the better pick. Option 2 is more of a dirty way of getting things
done when things like asp.net doesn't let us have the fine grain of control we want.
It would be really awesome if you used a pastebin and posted the link to your rendered page's html.
It uses the style from the grid, because it's in it. If you want to change it's style, change the style of the control. What do you want it to do?
Here is the pastebin link:
http://pastebin.com/m17d99f8a
I am using a stylesheet for the grid that I got from Matt Berseth's blog located here:
http://mattberseth.com/blog/2007/10/a_yui_datatable_styled_gridvie.html
I am using a similar stylesheet for the calendar that I cannot find the link for anymore.