I was trying to code a select/option box in a form in HTML, but when I viewed it, only one of the options (the one which was recently scrolled over) shows.
Here is my code:
HTML:
<form name="quizform">
<div class="row">
<div class="col-md-6">
<label>1) Do you smoke?</label>
</div>
<div class="col-md-6">
<select name="smokes?">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
</div>
</form>
CSS:
I have not written any CSS code for the form.
Images of the problem:
BTW: I am using bootstrap.css
It is aparent that your font is white and your background is also white, so only when you hover or scroll or select an item, actions which probably change the background color to blue, does the text show. You need to change either your background or your foreground color
The font color for your dropdown options is white as well as it's background, so only when you hover over it which changes the background to blue do you see the text. Add this CSS code below on the select to change the color of the text options.
//CSS
select{
color: black;
background-color: white;
}
Related
I would like to hide two buttons, which I have achieved using transparent.
I've also managed to hide them behind two hand written words in a picture, post and search. The problem is that when it comes to desktop, different screen sizes, mobile/tablet, different screen sizes/browsers, operating systems etc, the buttons don't match the text, being either too high or too low, depending on device etc.
It works if I set one place for mobile and one for desktop, but as soon as anything changes like screen size, the text and buttons mis-match so that the picture text becomes unclickable. It's the effect I'm trying to achieve which is like the user is clicking on handwriting when in fact it's just a hidden button on the image.
Also tried to cut the buttons out of the image and use background: url but it didn't work and just cropped the image in the wrong place, hiding the word.
The only solution I can think of is if there is some way of telling the browser not to move the image regardless of screen size etc.
.btn.btn:hover {color: transparent! important; background:
transparent! important; border: none! important;}
btn.btn:active {color: transparent! important; background:
transparent! important; border: none! important; box-
shadow:none;}
.btn.btn {color: transparent! important; background:
transparent! important; border: none! important;}
Html
<div id="content" class="main-container">
<section class="content-area pt0 ">
<div id="main" class="" role="main">
<div id="shapely_home_parallax-3" class="widget
shapely_home_parallax"><section class="cover fullscreen
image-bg"><div class="parallax-window fullscreen" data-
parallax="scroll" data-image-src="https://adsler.co.uk
/wp-
content/uploads/2019/07/IMG_20190706_112754.jpg"
data-ios-fix="true" data-over-scroll-fix="true" data-android-
fix="true"><div class="align-transform"><div class="row">
<div class="top-parallax-section"><div class="col-md-8
col-md-offset-2 col-sm-10 col-sm-offset-1 text-center">
<div class="mb32"></div><a class="btn btn-lg btn-white"
href="https://adsler.co.uk/wp-user-test-dashboard-2.
2/awpcp-place-ad/">Post</a><a class="btn btn-lg btn-
filled" href="https://adsler.co.uk/search.
adsler/">Search</a>
</div></div><!--end of row--></div>
</div></div></section><div class="clearfix"></div>
</div>
</div><!-- #main -->
</section><!-- section -->
Just so you can get more of a sense of what is meant, the page is: https://adsler.co.uk
You can try to play with display: none and display: block tag arguments for your divs. This probably will require using JavaScript to change the property your your buttons. Something along the lines of when the first button is clicked it's display style is changed to none, and when the second one is clicked the first one's style is changed to block. onclick = "myFunction();" should do the trick. https://www.w3schools.com/js/js_functions.asp for reference on JS functions
It's the effect I'm trying to achieve which is like the user is clicking on handwriting when in fact it's just a hidden button on the image.
A much more effective way of achieving this effect will be to use an HTML image map. Using an image map will allow you to create arbitrarily shaped regions on an image that can be clicked like links.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
CSS with Option tag - Editing text color
I know I must be overlooking something very simple. I am trying to change the color of the asterik (*) next to the SELECT AN AMOUNT just showing customer that it is required. I have tried span and font tags specifying the color but nothing seems to work. I can't seem to override the css for the select. Any help is appreciated.
I have posted code here also: http://jsfiddle.net/RGFAc/
<style type="text/css">
.styled-select select {background: transparent;width: 150px;color:#333333;font:bold 11px Arial, sans-serif;border: 1px solid #ABADB3;height: 25px;}
</style>
<div class="styled-select">
<select name="id" id="id">
<option value="">SELECT AN AMOUNT <span style="color:#EE3124">*</span></option>
<option value="gift5">$5</option>
<option value="gift10">$10</option>
<option value="gift15">$15</option>
</select></div>
I believe you can't style text inside the options tag.
Similar question: CSS with Option tag - Editing text color
You're styling the select, but the option element itself has a span inside it with its own color. Have you tried overriding that directly?
.styled-select select#id option span {color: #333 !important;}
I would like to know how I can create a custom HTML button which has a background Image and I can show a custom text over that image.
For example, I would like to show a submit button for which I have a background image for that button and the text "Submit" comes on top of that Image.
I tried this -
<input type="button" value="Submit" style="background-image: url(pages/images/ButtonBackground.png);">
However, it does not work properly. I just see the test submit and the button but the image does not show up.
I recommend that you use <button> instead of <input type='submit' /> or <input type='button' />. The reason is that you can embed HTML elements (nest elements) into the <button> element. This way, you can make a much more flexible button, which can be customized even more.
<button>
<span class='image'></span>
<span class='text'>Click Me!</span>
</button>
<input type="button" value="Submit" style="background: url(pages/images/ButtonBackground.png) no-repeat; width:px; height:px;">
you have to specify the width and height of the image so it covers your button and yes check the path of the image
this is exactly what I have in one of my css and usually what I do in this situation:
html
<input type="submit" value="" name="commit" id="message_submit" class="registerbtn"/>
css
.registerbtn{background:url(../images/btn_registro.jpg) no-repeat; width:98px; height:32px; border:none;}
The simplest way is probably to use a button element with a background. Use e.g. padding properties to make the button suitably large. It is a useful precaution to set a background color for the button, for use when the background image is not shown for some reason, using a color that has sufficient contrast with the text (so it should be similar in color usage to the background image). Example:
<button type=submit style="background: #ccc url(test.jpg); padding: 0.5em 1em">Go!</button>
Caveat: In old versions of IE, there are several bugs in the implementation of button elements. The bugs bite most seriously if a form has several submit buttons.
The reason for the failure when using an input type=submit element is that they are commonly implemented by browsers using built-in routines that are rather immune to CSS.
Here's how I created buttons with actual pics on them along with text. In CSS I put:
button {
display: inline-block;
height: 200px;
padding: 2px;
margin: 2px;
vertical-align: top;
width: 400px;
}
#alldogs-close-CSS {
background-image: url( All_dogs.jpg );
/*background-size: 100px 130px;*/
height: 150px;
width: 300px;
}
The button controls my height and width and #alldogs-close-CSS is the pic I wanted to show on the button.
In my Index.html page I just put:
<button id="alldogs-close-CSS">All Dogs</button>
Now the text isn't very pretty at the moment, but I haven't played with it yet. It does work, though.
I'm attempting to provide a border for a select tag and have been pulling my hair out for the last 2 hours.
I had it done before using position via absolute and relative, but my hard drive crashed and all my code was lost.
Put simply I have
<div style="position:relative; border:1px solid #cc0000;">
<select style="position:absolute;">
<option>1</option>
</select>
</div>
This doesn't seem to work... The div automatically expands to the parent div's width as opposed to the width of its content
How do I set the div to automatically fit to the contents of the select box AND have a border of 1px without getting pushed out of the frame?
If you need more code, please say so.
Any and all help is appreciated. :)
EDIT
Here's some more code...
HTML:
<div class="orderQuantity">
<label for="quantity" class="orderInputLabel">Quantity:</label>
<div> <!--THIS IS THE DIV THAT NEEDS A BORDER!! -->
<select id="quantity_cs" name="quantity_cs" autocomplete="off" class="required">
<option value=''> </option>
<option value='10'>10</option>
<option value='20'>20</option>
<option value='30'>30</option>
<option value='40'>40</option>
<option value='50'>50</option>
<option value='60'>60</option>
<option value='70'>70</option>
<option value='80'>80</option>
<option value='90'>90</option>
<option value='100'>100</option>
</select>
</div> <!-- end of div that needs border -->
</div>
CSS:
.orderQuantity {
margin-top: 12px;
}
This is all I have at this point. I've tried numerous things, none of which worked. Including making the select absolute and the parent div relative and vice versa.
Help? D:
You can use jQuery for this. Cross Browser Compatible. Check working example http://jsfiddle.net/Npv8P/2/
I've figured out a solution that involves floats and "clear:both" that appears to work cross browser.
<div style="float:left;"> <!-- just toggle border on this div using jquery -->
<select>
<option>1</option>
</select>
</div>
<div style="clear:both;"></div>
Seems to work fine. Thanks to Mahima for reaffirming what I was trying and to Hussein for the help. :)
Is it Possible to keep the background-image for drop down box using CSS.
For Textbox is getting correctly.
can anybody give sample example
Yes is possible. You can style the elements not the select box, as the select box gives only the line when you selected something.
try this css:
<style>
.green { background:green}
.red { background:red}
.blue{background:blue}
</style>
and this html:
<form>
<select class='green'>
<option class='red'>A</option>
<option class='blue'>B</option>
</select>
</form>
You will see that the main line is green and the options are colored each one to its colour. You can also attach images to the background for each css class.
Here you go
<select>
<option>One</option>
<option>Two</option>
<option>More ... </option>
</select>
css
select {
background: url("https://fastly.picsum.photos/id/1031/200/300.jpg?hmac=HVS-5o6kRugo6EcoZhPEsxm8Jnl7-J5tuEc20pN029c") repeat-x 0 0;
}