I want to hide the drop down arrow and button color, I'm using vue-bootstrap. is there any other method that I can use to make a drop down in my navbar without arrow and button color? I already tried a lot of method but it seems like every styling that I do is not working on vue-bootstrap
<b-dropdown
id="dropdown-left"
text="RECIPE"
ref="dropdown"
class="m-md-2">
<b-dropdown-item>A</b-dropdown-item>
<b-dropdown-item>B</b-dropdown-item>
</b-dropdown>
And There is source of package:dropdown-bootstrap
Just use no-caret prop to hide the arrow/caret:
<b-dropdown no-caret>
<!-- your content here -->
</b-dropdown>
Use toggle-class to style your dropdown button toggle:
<b-dropdown variant="link" toggle-class="my-custom-toggle" no-caret>
<!-- your content here -->
</b-dropdown>
.my-custom-toggle {
color: black;
text-decoration: none;
}
toggle-class prop could be an Array, Object or String. Similar to :class bind in vue.js
Check all <b-dropdown /> properties here --> https://bootstrap-vue.org/docs/components/dropdown#comp-ref-b-dropdown-props
You gotta override the style of the default classes responsible for what you see in the dropdown component, I don't know whether you want to change the dropdown permanently in the app or is it in just one case so either you give your dropdown a class name & use this styles or simply override the default classes in your stylesheet like this:
.btn-secondary { /* this is the button's class */
color: #000;
background-color: transparent;
border-color: transparent;
}
.dropdown-toggle::after{ /*this is responsible for the arrow you see in the button*/
display:none;
}
.btn-secondary.focus, .btn-secondary:focus, .btn-secondary:hover { /* this will change the button's hover & focus effect*/
color: #000;
background-color: #e7e7e7; /*just assumed you want it to be colored on hover IDK */
}
.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle { /*and apparently this is responsible for when the button is active*/
color: #000;
background-color: #e7e7e7;
}
It seems the only option available today is border=x where x is the thickness of the border. It looks really ugly as it outlines each choice in the group.
I want a simple border around all the choices. When I go into debug it I can manually add fram="box" to the generated Table html and it looks great.
I can't figure out how to add frame="box" to the xp:checkBoxGroup I've tried using attributes without success.
Any ideas?
If you use a xp:checkBoxGroup the XPages runtime puts the checkboxes in table cells and wraps it with a fieldset element. You can easily target that using some CSS. That's how I would solve this.
If you want a simple border around your checkbox group you can do this:
<style>
fieldset.xspCheckBox {
border: 1px solid #333333;
}
</style>
<xp:checkBoxGroup id="checkBoxGroup1">
<xp:selectItem
itemLabel="Blue"
itemValue="blue">
</xp:selectItem>
<xp:selectItem
itemLabel="Green"
itemValue="green">
</xp:selectItem>
</xp:checkBoxGroup>
Or if you want a border around every option you can use this:
<style>
fieldset.xspCheckBox {
border: 0;
}
fieldset.xspCheckBox label {
border: 1px solid #444444;
padding: 5px;
cursor: pointer;
}
fieldset.xspCheckBox label:hover {
background: #eeeeee;
}
</style>
(note that the :hover class isn't really necessary, but adds a hover effect to all options: depending on your browser requirements that might not be supported)
Just add a style with a border definition to your xp:checkBoxGroup:
<xp:checkBoxGroup id="..." value="..." style="border:1px solid black;">
...
</xp:checkBoxGroup>
Instead of putting the style directly into xp:checkBoxGroup definition you can use a css class.
I've been instructed to make links on a website have a different colour underline than the font colour. It all seemed quite easy, using border-bottom as below, except that linked images are now also underlined.
Is there a way, without using JS, to stop happening?
a{
color: #6A737B;
text-decoration: none;
}
a:hover{
border-bottom: 1px solid #C60B46;
text-decoration: none;
}
An example - hovering over the below image now adds the border-bottom CSS style to it, which I don't want -
<a title="Dyne Drewett" href="http://test.dynedrewett.com">
<img class="attachment-full" width="202" height="78" alt="Dyne Drewett Solicitors" src="http://test.example.com/Website-Header.png">
</a>
The only static way to do this would be to use a class on image links like:
<a href='http://whatever.url.here/' class='imglink'>
<img src='img/image.png' alt='Alt text'>
</a>
Then apply a CSS style to this class:
a.imglink:hover {
border-bottom: 0px solid;
}
You'd have to declare this AFTER the other a:hover CSS class.
Technically, you cannot set a style on an element based on what elements it contains. You cannot make the border of an a element depend on the presence of an img element inside (and this is what you are dealing with). Using classes would help, but from the comments, it seems that this is out of the question.
There’s a workaround: place each image at the bottom of the containing element (not on the baseline as per defaults), and shift it down one pixel, or whatever the border width might be. This way, the image will cover the bottom border, provided that the image has no transparency. CSS code:
a img {
vertical-align: bottom;
position: relative;
top: 1px;
}
This slightly changes the position of all images, so it might affect the overall layout unless you take precautions.
I'd suggest adding a class to the link, so you can do
a.imglink:hover{
border:0;
}
Alternatively, if you can't control that class, you can try adding a negative margin to your image to ensure the border doesn't show:
a img{
margin:0 0 -1px 0;
}
That -1px might need adjusting based on your other rules
Here's a fiddle to show the negative margin solution: http://jsfiddle.net/QRXGe/
Your solution will require you adding an additional class name to links that wrap images (or anything where the border should be removed). There's no way to sort of "reverse select" unless you want to employ a JavaScript technique.
A jQuery technique would be something like this:
$('a > img').parent().css('border-bottom', 'none');
That will remove a "border-bottom" style from all anchor tags that have image as a direct descendant. But you'll need it on every page, and every page is getting parsed by this script, so it's a little added overhead on each page.
Otherwise, if you have access to the HTML, creating a CSS class to target these specific links such as:
a.img-link{ border-bottom:none; }
And apply it to any link that's around an image such as:
<img src="#" alt="" />
I hope that helps!
Another way to achieve this is to simply make the images in links relative and then offset the bottom to cover the border. 5px seems to do it http://jsfiddle.net/ECuwD/
a{
color: #6A737B;
text-decoration: none;
}
a:hover{
border-bottom: 1px solid #C60B46;
text-decoration: none;
}
a img {
position:relative;
bottom: -5px;
}
a:hover img {
border-bottom:none;
}
or perhaps...
a:hover img.attachment-full {
border-bottom:none;
}
Apparently, what you want is a different behavior for the same markup (<a>) based on its content.
Sadly, there is no real way to do this with pure CSS, as this language is not programming language and therefore lacks the condition structures, such as if.
That does not mean that there is no solution! Here is a couple of things you can do:
Declare (say) in your HTML that the element (<a>) should be handled differently (with classes, in your case either <a class="text"> or <a class='image'>.
Use JavaScript to change your style dynamically, which means based on conditions, such as content for instance. In your case it would probably be something like:
function onLoad() {
for (var element in document.body) {
// look for links
// if this is a link:
// look for image inside link
// if there is one:
// remove the border
}
}
I'm using asp.net website and I need to apply css style to all text boxes and html Input with type text in one place.
I hope to help me in this issue ..
You can do this with CSS:
[type=text] {
color:Red;
border: 1px solid black;
}
This will apply that style to any element that is an input of type text. This will also work with the ASP text box control because that renders out as an input with a type of text.
The above CSS will show:
Error "Unexpected Character Sequence.Expected a selecter for style Rule."
You have to write the following code:
input[type=”text”] {
color:Red;
border: 1px solid black;
}
I have a button which is using a class formBtn
in css
.formBtn {color:#fff; background-color:#518ACD; border-color:#ccc #000 #000 #ccc; font- size:11px; font-weight:bold;}
in HTML
<html:submit styleClass="formBtn" value="Add"/>
Suggest me something so that I can use the same class name for a disabled button and show it in a different manner (say background-color:Grey). I may be using the style class like this
in HTML
<html:submit styleClass="formBtn" value="Disabled Add" disabled="true"/>
Use the :disabled pseudoclass.
.formBtn:disabled { background-color: grey; }
[attribute=value] selector should work IE7, don't know about IE6 if you care.
.formBtn[disabled=true] { background: gray}
If you have "Disabled" word in values you could do something like:
.formBtn[value~=Disabled] { background: gray}