I've gone through a variety of different solutions for this problem that don't seem to work for me. I'm sure it's because I'm using a CSS framework, Bulma, that tends to take over things a bit for the wrong direction.
I'm trying to remove the drop down icon from a drop-down menu and replace it with an image. I've got the image showing but I can't seem to make the default arrow hide/remove.
<div class="control">
<div id="newAd-Preview" class="select">
<select>
<option >
test
</option>
<option>Key</option>
<option>Hello</option>
</select>
</div>
</div>
Here's a jsfiddle with some solutions that I've found but don't seem to work. It also already has bulma linked. https://jsfiddle.net/uxgdp3b9/
Add this definition:
.select:not(.is-multiple):not(.is-loading)::after {
background: url("https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.4.8/collection/icon/svg/ios-arrow-dropdown.svg") no-repeat;
transform: rotate(0);
border: none;
width: 20px;
background-position: 50%;
top: 0;
bottom: 0;
right: 5px;
margin: 0;
height: auto;
}
.select {
display: inline-block;
max-width: 150px;
position: relative;
vertical-align: top;
}
select::-ms-expand
{
display: none;
}
.select:not(.is-multiple) {
height: 2.25em;
}
.select:not(.is-multiple):not(.is-loading)::after {
background: url("https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.4.8/collection/icon/svg/ios-arrow-dropdown.svg") no-repeat !important;
transform: rotate(0) !important;
border: none !important;
width: 20px !important;
background-position: 50% !important;
top: 0 !important;
bottom: 0 !important;
right: 5px !important;
margin: 0 !important;
height: auto !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" rel="stylesheet"/>
<div class="control">
<div id="newAd-Preview" class="select">
<select>
<option >
test
</option>
<option>Key</option>
<option>Hello</option>
</select>
</div>
</div>
Note: I needed to add the !important flags because SO's snippet doesn't include the CSS file in the header. If your Bulma CSS file is overridden by your CSS file, you don't need the !important flags.
Related
I am trying to build a select menu and I am using Bootstrap 4. I replaced background to replace arrow icon in select element, but now I need to add border left to that image, I am not finding anyway.
For reference, I am attaching Image of what's required
and this is what I have achieved so far
and code I did till now
HTML
<select class="custom-select">
<option disabled>Choose 1</option>
<option>another</option>
<option>2</option>
</select>
And this is my CSS
.custom-select {
background: #fff url("/assets/images/down-arrow.png") no-repeat right 0.75rem center;
background-size: 12px 12px;
}
You can use another image for the line in the background as well or make a combined image of arrow and line
Stack Snippet
.custom-select {
background: url("https://image.flaticon.com/icons/png/128/118/118738.png") no-repeat right 0.75rem center, url("http://www.i2symbol.com/images/symbols/brackets/presentation_form_for_vertical_low_line_uFE33_icon_128x128.png") no-repeat right 2rem center;
background-size: 12px 12px;
width: 300px;
height: 40px;
-webkit-appearance: none;
position: relative;
padding: 0 10px;
}
<select class="custom-select">
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
</select>
Wrap the select in another DIV (eg. custom-select-wrapper) and use a CSS psuedo element for the border...
https://www.codeply.com/go/edxDmWNLx6
<div class="custom-select-wrapper">
<select classs="custom-select">
<option>opt1</option>
<option>opt2</option>
<option>opt3</option>
</select>
</div>
CSS
.custom-select-wrapper {
position: relative
}
.custom-select-wrapper:after {
border-left: 2px solid #ccc;
content:"\00a0";
position: absolute;
top: 0;
right: 46px;
z-index: 2;
display:block;
height: 38px;
}
I suggest you wrap the select in a div and add an after to it
<div class="select-wrapper">
<select class="custom-select"></select>
</div>
Than, in CSS you add the arrow with an after
.select-wrapper {
position: relative;
background: #fff;
z-index: 1;
}
.select-wrapper select {
background: transparent;
}
.select-wrapper:after {
position: absolute;
z-index: -1;
top: 2px;
right: 0;
bottom: 2px;
width: 12px;
background: #fff url("/assets/rogers/images/down-arrow.png") no-repeat right 0.75rem center;
background-size: 12px 12px;
border-left: 1px solid #ddd;
}
I couldn't test the code, because you didn't share your HTML, so I just gave you an example.
Or than you can add the line to the arrow image
I am trying the create a search page, where when i add text in search panel the images of those text will display. The issue I am facing is that the images are overlapping on the search div even though I have positioned it well.
I don't want to fix it using top values as I want the page to be responsive and the top values will be changing based on the width of the page. Is there a cleaner way to do it ?
<div class="jumbotron text-center">
</div>
<div id="search">
<form>
<input type="search" ng-model="vm.search.gif" value="" placeholder="type what you're looking for" />
<button type="submit" class="btn btn-primary" ng-click="vm.performSearch()">Search</button>
</form>
</div>
<div class="card">
<img ng-repeat="g in vm.giphies" ng-src="{{g.images.original.url}}">
</div>
css:
#body {
width: 100%;
}
#search {
position: absolute;
top: 174px;
left: 0px;
width: 100%;
height: 30%;
background-color: rgba(0, 0, 0, 0.7);
opacity: 10;
}
#search input[type="search"] {
position: absolute;
top: 50%;
width: 100%;
color: rgb(255, 255, 255);
background: rgba(0, 0, 0, 0);
font-size: 60px;
font-weight: 300;
text-align: center;
border: 0px;
margin: 0px auto;
margin-top: -51px;
padding-left: 30px;
padding-right: 30px;
outline: none;
}
#search .btn {
position: absolute;
top: 50%;
left: 50%;
margin-top: 61px;
margin-left: -45px;
}
.card {
position: absolute;
}
You can set the overflow on the card class to hidden(to hide the overlapping content) Or you can set it to auto( scroll bars appear if overlapping).
.card{
overflow: hidden;
}
Well you haven't positioned anything well there. Does everything really need the position property set to absolute? If so, try using JavaScript to get the search area's height (or set a fixed one) & apply it to the "top" property in the card.
Hi i have tried allot ways how to fix this, but i cant float div to left side. When i create div its automatically stacks in right top corner and i cant move it only with padding and margin.
My index.php example need to float:left div with class language:
<body class="menu">
<div class="wrapper">
<div class="menu-toggle">
Show menu
</div>
<div class="language">
Select lang
</div>
<header>
<nav class="menu-side">
<ul>
<li>Home</li>
<li>Login</li>
<li>Contact</li>
</ul>
</nav>
</header>
<form action="upload.php" method="POST" enctype="multipart/form-data" id="upload" class="upload">
<fieldset>
<legend>Upload files</legend>
<input type="file" id="file" name="file[]" required multiple>
<input type="submit" id="submit" name="submit" value="Upload">
</fieldset>
<div class="bar">
<span class="bar-fill" id="pb"><span class="bar-fill-text" id="pt"></span></span>
</div>
<div id="uploads" class="uploads">
Uploaded links will apear here.
</div>
</form>
</div>
<footer>
Created by Revix © 2014
</footer>
</body>
And my css is:
html, body { height: 100%; margin-top: 0; }
body { font-family: "Georgia", serif; }
.upload { width:500px; background: #f0f0f0; border: 1px solid #ddd; padding: 20px; vertical-align: center; margin-left: auto; margin-right: auto; }
.upload fieldset { border: 0; padding: 0; margin-bottom: 10px; }
.upload fieldset legend { font-size: 1.2em; margin-bottom: 10px; }
footer { background-color: cornflowerblue; text-align: center; vertical-align: middle; min-width: 542px; }
.wrapper { min-height: 100%; margin-bottom: -100px; clear: both; }
.wrapper:after { content: ""; display: block; }
.wrapper:after, footer { height: 100px; }
header { position: fixed; margin-left: auto; margin-right: auto; }
.uploads a, .uploads span { display: block; }
.bar { width: 100%; background: #eee; padding: 3px; margin-bottom: 10px; box-shadow: inset 0 1px 3px rgba(0,0,0,.2); border-radius: 3px; box-sizing:border-box; }
.bar-fill { height: 20px; display: block; background: cornflowerblue; width: 0; border-radius: 3px;
-webkit-transition:width 0.8s ease; -moz-transition:width 0.8s ease; -o-transition:width 0.8s ease; transition:width 0.8s ease; }
.bar-fill-text { color:#fff; padding: 3px; }
.language { float: left; position: absolute; width: 80px; padding: 3px; }
If you wanna to see my web site: Here
Can you suggest me what to do?
Do you mean this effect? Please see my demo.
Please paste your code to jsbin.com next time. Otherwise it's not convenient for us to resolve your problem.
http://jsbin.com/yivat/1
float:left and position:absolute doesn't work.
remove position:absolute
.language { float: left; width: 80px; padding: 3px; }
Inspecting these elements in my browser they have all the CSS attribute position:absolute; set, which sets them at a absolute position within the window. But these elements seem to have no left and top position set which sets you all elements to window position 0,0 which is left top corner.
I would recommend to set the position to relative position:relative; or define specific positions for your html elements.
Floating left on a absolute positioned element will not work. Try relative to float it or position it on your page with top:px left:px;
What is wrong with this code? I have been working on this for hours and cannot figure out why the button.png will now show up but the link is there in the location of the "one" div..?
#one
{
position: fixed;
left:225px;
top:702px;
}
.button
{
display: block;
width: 40px;
height: 40px;
background: url('images/button.png') bottom;
text-indent: -99999px;
}
.button:hover
{
background-position: 0 0;
background-color: transparent;
border-style: none;
}
_
<body>
<div id="map">
<img src="images/map.png"/>
</div>
<div id="one">
<a class="button" href="images/one.jpg"/>
<img src="images/button.png"/>
</a>
</div>
</body>
Your title is not really much related to your question .. so I'll just try to answer the question.
The image is not showing, because by default img is an inline element and you've set text-indent to -99999px.
You can either remove that text-indent or set the display of img to block:
.button img { display: block; }
I'm trying add a tab to my web page that looks like this:
Using this example as a basis, I've gotten it partially working. My case differs because I want the text section to be a fixed with, but the tail section to dynamically resize to take up the rest of the tab's container.
It looks good in IE 6, but doesn't really take up the full width of the container.
In Firefox 3 it doesn't render well at all: (the red is a blank area between the spans).
How do I get this to render properly in both IE6 and Firefox to take up the full width specified for #Tab? #Tab4 is the area I'd like to size to take up as much room as possible.
<style type="text/css">
#Tab
{
width: 300px;
}
#Tab1
{
background: #000 url(BlueTabSprite.png) no-repeat 0 -136px;
display: inline-block;
height: 23px;
padding-left: 4px;
}
#Tab2
{
background: #000 url(BlueTabSprite.png) repeat-x 0 -242px;
display: inline-block;
overflow: hidden;
padding-top: 4px;
height: 19px;
width: 100px;
}
#Tab3
{
background: #000 url(BlueTabSprite.png) no-repeat right -30px;
display: inline-block;
height: 23px;
padding-right: 6px;
}
#Tab4
{
background: #000 url(BlueTabSprite.png) repeat-x 0 -83px;
display: inline-block;
height: 23px;
width:60%
}
#Tab5
{
background: #000 url(BlueTabSprite.png) no-repeat right -189px;
display: inline-block;
height: 23px;
padding-right:6px;
}
</style>
<div id="Tab">
<span id="Tab1">
<span id="Tab3">
<span id="Tab2">Test Tab</span>
</span>
</span>
<span id="Tab5">
<span id="Tab4"></span>
</span>
</div>
I think the Sliding Doors Technique may be what you're looking for.
This is a simplified version that works:
<div style="background: url('BlueTabSprite.png') no-repeat; width: 290px; min-width: 120px; max-width: 290px; height: 23px;">
<div style="float: right; background: url('BlueTabSprite.png') top right no-repeat; width: 10px; height: 23px;"></div>
Test
</div>
This tool may be a help.