Input and select fields not returning to original opacity

HTML & CSS
1

Hi,

I am trying to make a form which is on a semi-transparent div, which is then on a big background picture, its working but the problem i am facing is that the fields i.e input and select fields are also getting transparent and text is also not showing, my code is below:

<style>
.fixopacity {
	opacity:1; 
	filter: alpha(opacity=100);
	color:#fff;
}
</style>	

<form id="frmRegister" action="book-confirm.php" method="POST">	
	<div class="container" style="background-image: url('pictures/big-background.jpg'); padding:0 margin:0; width:100%; height:100%;">
		<div class="col-md-10 col-md-offset-1">
			<br />
			<div style="border-radius:8px; background-color:#000; opacity:0.7; filter: alpha(opacity=70); padding:20px; margin-bottom:0px;">
				<div class="row form-group">
					<div class="col-md-6">
						<label class="fixopacity">* From Address:</label>
						<input required name="from" type="text" value="<?=$_SESSION["from"]?>" class="form-control fixopacity" placeholder="Address, City, Postcode" />
					</div>
					<div class="col-md-6">
						<label class="fixopacity">* To Address:</label>
						<input required name="to" type="text" value="<?=$_SESSION["to"]?>" class="form-control fixopacity" placeholder="Address, City, Postcode" />
					</div>
				</div>
				
				<hr class="hidden-lg" />
				
				<div class="row form-group">
					<div class="col-md-3">
						<label class="fixopacity">* How many passengers ?</label>
						<select required name="pax" class="form-control">
							<?=genNumDD (1, 8, $_SESSION["pax"])?>
						</select>
					</div>
					<div class="col-md-3">
						<label class="fixopacity">Big Bags or Suitcase ?</label>
						<select name="bigbags" class="form-control">
							<option value="0"<?php if (empty($_SESSION["bigbags"])) { echo " SELECTED"; } ?>>Select...</option>
							<?=genNumDD (1, 8, $_SESSION["bigbags"])?>
						</select>
					</div>
					<div class="col-md-3">
						<label class="fixopacity">Hand Bags ?</label>
						<select name="handbags" class="form-control">
							<option value="0"<?php if (empty($_SESSION["handbags"])) { echo " SELECTED"; } ?>>Select...</option>
							<?=genNumDD (01, 8, $_SESSION["handbags"])?>
						</select>
					</div>
					<div class="col-md-3" style="fixopacity">
						<label class="fixopacity">* Vehcile Type ?</label>
						<select required name="vehicle" class="form-control fixopacity">
							<option value="0"<?php if ($_SESSION["vehicle"] == "0") { echo " SELECTED"; } ?>>Saloon (Upto 4 Pax + 2 Handbags + 2 Suitcase)</option>
							<option value="1"<?php if ($_SESSION["vehicle"] == "1") { echo " SELECTED"; } ?>>Estate (Upto 4 Pax + 4 Handbags + 4 Suitcase)</option>
							<option value="2"<?php if ($_SESSION["vehicle"] == "2") { echo " SELECTED"; } ?>>Minibus (Upto 8 Pax + 8 Handbags + 8 Suitcase)</option>
						</select>
					</div>
				</div>
			</div>
		</div>
		
		<div class="col-md-10 col-md-offset-1" style="padding-bottom:20px;"><input type="submit" name="btnBook" class="btn btn-primary" style="width:100%;" value="Book Now" /></div>
	</div>
</form>

I also tried adding some css code to fix, but it does’nt seems to be working. Can anyone help me fix so that fields so at full opacity ?

Thanks in advance.

2

When you apply opacity to a block element it becomes ‘atomic’ in that the element and all its children are rendered with that opacity setting. You can’t then try and change a child to not have opacity because the whole block is rendered in one go.

If all you want is a partially opaque background color then use rgba instead.

e.g.

<div style="border-radius:8px; background:rgba(0,0,0,0.7); padding:20px; margin-bottom:0px;">

The last value is a level of opacity from zero to one. In the rule above I have set the black (0,0,0) to have 0.7 opacity.

So to re-iterate if you use the property opacity then it is not possible to undo it for any child elements.

1 Like
3

Hi,

Thanks it works great.

Thanks.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.