I need to style my select with css, so it looks like the image below, there is 2 things i cant figure out, when option is selected remove the classic blue background, how to indent the text, text-indent is not working for me, and how to lower the option box.
<select name="txtCountry">
<option>Select Country</option>
<option value="1">Georgia</option>
<option value="2">Afghanistan</option>
</select>
Select tags are near-enough impossible to customise, and are at the mercy of your browser as to how they are styled (albeit height and width).
You would be much better to construct and style your own using CSS if you are looking for a customisable option in which is cross-browser compatible.
I have used jQuery in order to complete this functionality. It also makes use of spans in order to replace the option tags, allowing for further styling (no external library needed, although there are many available):
$('.item').hide();
$('.item').click(function () {
var x = $(this).text();
$(this).siblings(".selected").text(x);
$(this).slideUp().siblings(".item").slideUp();
});
$('.Drop').click(function () {
$(this).parent().toggleClass("opened");
$(this).siblings(".item").slideToggle();
});
$('.selected').click(function () {
$(this).parent().removeClass("opened");
$(this).siblings(".item").slideUp();
});
div {
height:30px;
width:200px;
background:lightgray;
position:relative;
}
.item, .selected {
display:block;
height:30px;
width:100%;position:relative;
background:gray;
transition:all 0.6s;
line-height:30px;
}
.selected {
background:none;
display:block;
}
.item:hover {
background:lightgray;
}
.Drop {
position:absolute;
top:0;
right:0;
height:100%;
width:30px;
background:tomato;
transition:all 0.4s;
transform:rotate(0deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div> <span class="selected">1</span>
<span class="Drop"></span>
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
<span class="item">4</span>
<span class="item">5</span>
<span class="item">6</span>
</div>
Note
This is not a finished product, but is for demo only.
Related
I want the search icon to be inside of the search box but it is showing below it.
Here is the code,
<section class="example">
<section class="search-container">
<input type="search" id="sampleSearchInput" ><i class="material-icons">search</i>
</section>
</section>
CSS code-
input[type="search"] {
padding-right:32px;
}
.search-container {
position:relative;
width:20%;
margin-left:55%;
}
.search-container > input[type="search"] + span {
position:absolute;
top:12px;
right:10px;
}
What could possibly be wrong?
Add this you your css
.material-icons{
position: absolute;
top:0;
}
I have a third party plugin and I need to change a word. They only give me access to CSS:
<span class="apple">This is some words</span>
Changed to:
<span class="apple">This is some text</span>
How would I do that with pure CSS?
You could try as below using pseudo selector :after,
span{
position:relative;
color:transparent;
}
span:after{
content:'This is some text';
position:absolute;
right:10px;
color:#111;
}
<span class="apple">This is some words</span>
If you have access to the HTML then you can hide the wrapper of the unwanted text:
p.old-text-class { diplay: none;}
And insert the new text at the same place in HTML:
<p class="new-text-class">This is some text</p>
Try using a pseudo element with content.
.apple {
visibility: hidden;
}
.apple:before {
content: "This is NEW text";
visibility: visible;
}
<span class="apple">This is OLD text</span>
I have a sentence composed of multiple span elements:
<span class="sentence">
<span>First</span>
<span>second</span>
<span>third.</span>
</span>
When a span gets clicked (:active), I want it to have an increased font but without moving the elements around it horizontally.
Idle
Second word :active
I don't want any Javascript involved (to compute the :active width of the element, or some hack like this), only CSS. A solution would be to add right/left padding by default and suppress it when a word is :active, but it doesn't work for all word lengths: http://jsfiddle.net/Ampwt/1/
Any idea of how I could achieve this?
Apply width and height to your span. Please see sample css.
.sentence span {
display:inline-block;
vertical-align:middle;
font-size:1.5em;
width: 170px;
height:30px;
}
.sentence span:active {
font-size:2em;
}
Use transform: scale(): http://jsfiddle.net/Ampwt/2/.
<span class="sentence">
<span>First</span>
<span>second</span>
<span>third.</span>
</span>
<br />
<span class="sentence">
<span>First</span>
<span>very long word</span>
<span>third.</span>
</span>
CSS:
.sentence span {
display:inline-block;
vertical-align:middle;
font-size:1.5em;
padding:0 1em;
}
.sentence span:active {
-webkit-transform: scale(2);
transform: scale(2);
}
I want to display the letters of my logo text in different colors, but using span is very rough and using JavaScript slows the page loading time. So I tried to use the CSS pseudo element :before, using multiple classes of same element but it’s not working. It shows only the letter of last class, that is letter4. Here is the code:
.letter1:before {
content:"Z";
color:red;
}
.letter2:before {
content:"O";
color:green;
}
.letter3:before {
content:"N";
color:blue;
}
.letter4:before {
content:"E";
color:purple;
}
And the HTML:
<span class='letter1 letter2 letter3 letter4'> </span>
How do I make it work?
Here you are SIR
demo: http://jsfiddle.net/7UjgL/
the style:
.letter{
width:40px;
height:20px;
position:relative;
letter-spacing: 26px;
}
.letter:first-letter{
color:red;
}
.letter:before,.letter:after{
position:absolute;
top: 0px;
}
.letter:before{
content: 'o';
color: green;
left: 11px;
}
.letter:after{
content:'n';
color:blue;
left: 22px;
}
the markup:
<div class=letter>ze</div>
You should use separate span elements for it because it will be more readable in the long run.
CSS:
.letter1{color:red;}
.letter2{color:green;}
.letter3{color:blue;}
.letter4{color:purple;}
HTML:
<span class='letter1'>Z</span>
<span class='letter2'>O</span>
<span class='letter3'>N</span>
<span class='letter4'>E</span>
I'm trying to get the textboxes to float over the canvas in the appropriate spot.
If I use the id's to implement the css, it doesn't work. But If I specify the html element in the CSS instead, it works. (though, then I cannot manipulate the unique textboxes) (Demonstrated by the canvas tag)
Little Help?
<style type="text/css">
canvas { position:absolute;
z-index:-1;
top:0px;
left:100px;
}
.wrapper{ height:100%;
width:100%;
}
.username { position:absolute;
top:200px;
left:150px;
visibility:hidden;
z-index:1;
}
.password { position:absolute;
top:300px;
left:150px;
visibility:hidden;
z-index:2;
}
</style>
</head>
<body>
<div id="wrapper">
<canvas id = "gamescreen" height = "800" width = "800"></canvas>
<input type="text" name="username" id="username" />
<input type="password" name="password" id="password" />
</div>
</body>
The problem is that the . selector works on classes. If you want to select elements using their id you need to use # infront of the id. Example:
CSS
#example {
background: black;
}
HTML
<div id="example></div>
What you've implemented are CSS classes. Declare your div with class="wrapper" etc to apply those styles. You should also probably specify a finer-grained class for those particular styles, such as input.username, input.password and div.wrapper. Or if you want it done just for the specific element and aren't planning to reuse those styles anywhere else, change the . prefix to a # to match the id of the element rather than its class.