Imagine you have:
<div class="home">
<input type="checkbox"/>....
</div>
I am trying to add margin-left:3px to the checkbox. This is my CSS code:
.home+input[type=checkbox]{
margin-left:3px;
}
Can anyone assist me with this?
Imagine you have:
<div class="home">
<input type="checkbox"/>....
</div>
I am trying to add margin-left:3px to the checkbox. This is my CSS code:
.home+input[type=checkbox]{
margin-left:3px;
}
Can anyone assist me with this?
.home input[type="checkbox"]{
margin-left:3px;
}<div class="home">
<input type="checkbox"/>....
</div>If you don't have a specific need, the plus sign isn't really necessary... Just make sure to use quotes around checkbox..!
Just a little tweak needed - remember to enclose the checkbox code in quotes like this: input[type="checkbox"]
input[type="checkbox"]
{
margin-left:10px;
}<div class="home">
<input type="checkbox"/>
</div>Both previous answers may work, but they lack accuracy.
I generally recommend using quotes around attribute selectors like [type="checkbox"], but it can also function properly without them as shown in this article where quotes are only needed for special characters: [type=checkbox].
The issue with your code not working was due to the + in your selector, which is used to target siblings according to W3Schools.
.home+input[type=checkbox]{} would style an input of type checkbox that directly follows an element with the home class.
<div class="home">....</div>
<input type="checkbox"/>....
Since your input is contained within the .home element, you should avoid the sibling selector +.
This revised code will solve the issue:
.home input[type=checkbox]{
margin-left:3px;
}<div class="home">
<input type="checkbox"/>.... </div>
Is there a way to fade in an image based on the percentage scrolled, rather than a set number of pixels? I want my website to be responsive and adjust to all screen resolutions. Or perhaps is there a method to have the image fade in when it enters the fiel ...
Just wondering, I've noticed that every time I come across a page element '<###>[content]<###>' and want to learn how to manipulate it, I usually search for something like "how to do x with div" or "how to get y from div". I know ...
I need help with creating a testimonial section where two divs automatically scroll inside a fixed-height container. Currently, only one div is scrolling while the other remains static in my code. I have implemented JavaScript for automatic scrolling wit ...
Take a look at the code snippet below: .flex-container { padding: 20px; margin: 20px; list-style: none; border: 1px solid silver; -ms-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz- ...
I have a script that loads external HTML files, but I am facing an issue with changing the font to Arial. The script is as follows: <script type="text/javascript"> $(document).ready(function(){ $("#page1").click(function(){ ...
Within my table, I have the following row. <tr class="data_rows" ng-repeat='d in t2'> <td class="tds"> <input class='checkBoxInput' type='checkbox' onchange='keepCount(this)'></td> &l ...
While working on a navigation menu, I noticed that in large screens the navigation looks fine but in laptop view, the words are breaking up and it's acceptable. However, I want to remove the extra spacing after the text. In the large screen: https:/ ...
I'm having trouble with my website's navigation styling getting messed up by the jQuery accordion. The unordered list inside the .accordion div is overflowing and losing its CSS styling. I've tried adding clearStyle true and autoHeight false ...
There seems to be an issue with the background color of my list not displaying correctly. The problem arose after floating elements left and right. Any suggestions on how to resolve this? If you'd like to take a look, here's the link to the fidd ...
Within my angular application, I have successfully implemented image upload and preview functionality using the following code: HTML: <input type='file' (change)="readUrl($event)"> <img [src]="url"> TS: readUrl(event:any) { if ...
Is there a number spinner in Angular Material? I attempted to use the code provided in this question's demo: <mat-form-field> <input type="number" class="form-control" matInput name="valu ...
When it comes to the styling of my first line, I have a specific style in mind: * { text-align:left; } This style works well across most parts of the site as they are predominantly left aligned. However, there are few areas where I need the text alig ...
Here's a small example. I'm feeling a bit rusty with JavaScript, as it's been some time since I last worked with it. The problem I'm encountering is an error in Chrome developer tools: "Uncaught TypeError: Cannot set property 'src ...
I'm in the process of developing a social networking platform and I am currently working on adding a feature that allows users to block other users. However, I am facing challenges when it comes to implementing this feature. In my database, there is ...
I'm having trouble with a project. One of the tasks is to use jQuery or JavaScript to increase the font size of a paragraph. The console statements are incrementing by +1 with every mouse click (the first click adds 1, the second adds 2, and so on). ...
I am trying to create a simple JavaScript program that allows users to like and dislike content. However, I am new to JavaScript and finding it a bit challenging. Basically, when the user clicks on the Follow button, the "countF" variable should increase ...
I'm currently working on an ajax call function that successfully fills a drop-down list with data from a specific URL. However, I am looking to modify the function so that it can receive variables in order to populate the drop-down list dynamically. ...
Here is my HTML/CSS code, I am relatively new to this field. Please let me know if I have overlooked anything. .dropdown-menu>li>a { padding: 3px 5px; } <li> <a id="btn-other-1" href="#"> <!–- I do not want apply css for t ...
Check out my jsFiddle code below: var marker = new google.maps.Marker({ position: new google.maps.LatLng(-25.363882,131.044922), map: map, title:"Hello World!", icon: CanvasCrear("hola", 15) ...
I'm encountering an issue with inserting a variable into my array. Below is the code snippet: var data = new Array(); google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("http://www.ntvmsnbc.com/id/24927681/device/r ...